今天我们来学习如何使用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);
});
});

通过上述代码，我们可以实现一个简单的纵向跑马灯效果，当鼠标移入时停止滚动，移出时继续滚动。