使用jQuery实现向上循环滚动效果，超简单
今天突发奇想 想到的一个新思路
通过使用animate改变外边距达到滚动效果 再用复制节点插入到最后一行达到循环目的
HTML代码如下
<body> <ul > <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>希望对各位有所帮助
- 上一篇 »css怎么实现平滑滚动效果？
- 下一篇 »css实现视觉差的滚动