jQuery實作廣告條滾動效果實例分享
- 小云云原創
- 2017-12-30 14:44:341379瀏覽
本文主要為大家詳細介紹了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>相關推薦：
以上是jQuery實作廣告條滾動效果實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn