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

最新推荐文章于 2024-08-02 14:21:03 发布

weixin_30399871

最新推荐文章于 2024-08-02 14:21:03 发布

阅读量1.2k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/hfx123/p/9520732.html

版权

今天突发奇想想到的一个新思路

通过使用animate改变外边距达到滚动效果再用复制节点插入到最后一行达到循环目的

HTML代码如下

<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>

js代码如下

<script type="text/javascript">
$(function(){

//每隔两秒进行一次滚动
var timing =setInterval("info()",2000);

$("ul").hover(
function(){clearInterval(timing);},
function(){timing = 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>

希望对各位有所帮助

转载于:https://www.cnblogs.com/hfx123/p/9520732.html

weixin_30399871

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery实现向上循环滚动效果（超简单）

今天突发奇想想到的一个新思路通过使用animate改变外边距达到滚动效果再用复制节点插入到最后一行达到循环目的HTML代码如下<body><ul style="border: 1px solid blue;height: 60px;width:300px;overflow: hidden;"><li>aaaaaaaaaaaaaaaaa...
复制链接

扫一扫