今天突發奇想 想到的一個新思路
通過使用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>
希望對各位有所幫助