今天我們來學習如何使用jQuery來制作一個跑馬燈效果。

// HTML結構：
<div id="marquee">
<ul>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第5行</li>
</ul>
</div>
// CSS樣式：
#marquee {
width: 200px;
height: 100px;
overflow: hidden;
border: 1px solid #ccc;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
height: 20px;
line-height: 20px;
}
// jQuery代碼：
$(function(){
var marqueeUl = $('#marquee ul');
var marqueeLi = marqueeUl.find('li');
var liHeight = marqueeLi.outerHeight();
var speed = 500; // 滾動速度
var delay = 2000; // 停頓時間
var time;
// 定義一個滾動函數
function marquee() {
marqueeUl.animate({marginTop: -liHeight}, speed, function(){
$(this).css({marginTop: 0}).find('li:first').appendTo(this);
});
}
// 定義一個定時器，每隔delay時間調用一次滾動函數
time = setInterval(marquee, delay);
// 鼠標移入時停止滾動，移出時繼續滾動
marqueeUl.hover(function(){
clearInterval(time);
}, function(){
time = setInterval(marquee, delay);
});
});

通過上述代碼，我們可以實現一個簡單的縱向跑馬燈效果，當鼠標移入時停止滾動，移出時繼續滾動。