標籤：使用 迴圈 tin height nim clone body one 代碼
代碼如下
<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>
<script type="text/javascript">
$(function(){
//每隔兩秒進行一次滾動
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>
以上就是全部代碼了，這個滾動效果也有取巧的成分在裡面，不過不管是黑貓還是白貓能抓到老鼠的就是好貓。
使用jQuery實現向上迴圈滾動效果（超簡單）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
