jQuery实现广告条滚动效果实例分享
程序员文章站
2022-03-17 11:26:02
...
本文主要为大家详细介绍了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浮动的广告条实现分解_HTML/Xhtml_网页制作
js实现网站最上边可关闭的浮动广告条代码_javascript技巧
以上就是jQuery实现广告条滚动效果实例分享的详细内容，更多请关注其它相关文章！
上一篇： 如何限制Webpack压缩图片的大小