码迷,mamicode.com
首页 > Web开发 > 详细

使用jQuery实现向上循环滚动效果(超简单)

时间:2018-08-22 22:49:59      阅读:692      评论:0      收藏:0      [点我收藏+]

标签:使用   循环   tin   height   nim   clone   body   one   代码   

代码如下

<body>
<ul style="border: 1px solid blue;height: 60px;width:300px;overflow: hidden;">
<li>aaaaaaaaaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbbbbbbbbb</li>
<li>ccccccccccccccccccccc</li>
<li>ddddddddddddddddddddd</li>
<li>eeeeeeeeeeeeeeeeeeeee</li>
<li>fffffffffffffffffffff</li>
<li>ggggggggggggggggggggg</li>
<li>hhhhhhhhhhhhhhhhhhhhh</li>
</ul>
</body>
<script type="text/javascript">
$(function(){

//每隔两秒进行一次滚动
setInterval("info()",2000);
})
function info(){

//复制第一个li

var li =$("ul>li:eq(0)").clone();

//使用animate对li的外边距进行调整从而达到向上滚动的效果
$("ul>li:eq(0)").animate({marginTop:"-20px"},2000,function(){

//对已经消失的li进行删除
$("ul>li:eq(0)").remove();

//把复制后的li插入到最后
$("ul").append(li);
})
}
</script>

以上就是全部代码了,这个滚动效果也有取巧的成分在里面,不过不管是黑猫还是白猫能抓到老鼠的就是好猫。

使用jQuery实现向上循环滚动效果(超简单)

标签:使用   循环   tin   height   nim   clone   body   one   代码   

原文地址:https://www.cnblogs.com/hfx123/p/9520732.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!