使用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>
希望对各位有所帮助
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步