이 글은 주로 광고 바 스크롤 효과를 달성하기 위한 jQuery를 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{padding: 0px;margin: 0px;}
#list{width: 150px;height: 310px;margin: 0px auto;border: 1px solid #ccc;overflow: hidden;}
#list li{list-style: none;height: 30px;line-height: 30px;border-bottom: 1px dashed #999;}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
var marginTop = 0;//注意命名
var scroll = true;
//定时函数，每150毫秒执行一次函数
setInterval(function(){
if(scroll){
$("#list li:first").animate( //第一个li开始执行动画
{marginTop:marginTop--}, //设置上面的外边距自减
0,
function(){ //动画之后执行的函数
if( -marginTop==$(this).height()+1){ //判断li移动的距离是否超过自身的高度
var $f = $(this); //复制一个li
$(this).remove(); //把第一个移除。第一个移除之后，第二个就自动变为第一个
marginTop=0;
$f.css("margin-top","0px");
$("ul").append($f); //把第一个追加加到列表的最后，变成一个无缝连接
}
}
);
}
},150);
$(function(){
$("ul").hover(function(){scroll = false;},function(){scroll = true;});
});
</script>
</head>
<body>
<p id="list">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
</ul>
</p>
</body>
</html>관련 추천:
순환 광고 배너의 효과를 얻는 방법에 대한 자바스크립트 튜토리얼
Html+CSS 플로팅 광고 배너로 decomposition_HTML/Xhtml_웹 페이지 제작
js을 달성하기 웹사이트 상단 닫기 가능한 플로팅 광고 바코드_javascript 기술
위 내용은 광고 배너 스크롤 효과의 jQuery 구현 공유 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
