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

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

通过使用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>

希望对各位有所帮助

上一篇:阿里云系列——7.阿里云IIS系列详解(过程+通用+最新)


下一篇:[leetcode]Rotate Image @ Python