jquery+跑马灯

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

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！