【转】jQuery无缝滚动实现公告功能

最新推荐文章于 2025-08-15 22:56:20 发布

转载最新推荐文章于 2025-08-15 22:56:20 发布 · 71 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiangniu/archive/2012/05/01/2478326.html

文章标签：

#javascript #ViewUI

本文详细介绍了使用jQuery实现单行和多行无缝滚动效果的方法，包括定义滚动区域、设置滚动间隔时间、通过hover事件控制滚动行为等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：http://www.ttwrite.com/web-2/jquery%E6%97%A0%E7%BC%9D%E6%BB%9A%E5%8A%A8%E5%AE%9E%E7%8E%B0%E5%85%AC%E5%91%8A%E5%8A%9F%E8%83%BD.html/comment-page-1

----------------------------------------------------------------

单行的测试通过，多行的没有试过

$(function() {
    //单行应用
    var _wrap = $('ul.line'); //定义滚动区域
    var _interval = 5000; //定义滚动间隙时间
    var _moving; //需要清除的动画
    _wrap.hover(function() {
        clearInterval(_moving); //当鼠标在滚动区域中时,停止滚动
    },
    function() {
        _moving = setInterval(function() {
            var _field = _wrap.find('li:first'); //此变量不可放置于函数起始处,li:first取值是变化的
            var _h = _field.height(); //取得每次滚动高度
            _field.animate({
                marginTop: -_h + 'px'
            },
            600,
            function() { //通过取负margin值,隐藏第一行
                _field.css('marginTop', 0).appendTo(_wrap); //隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
            })
        },
        _interval) //滚动间隔时间取决于_interval
    }).trigger('mouseleave'); //函数载入时,模拟执行mouseleave,即自动滚动
});
$(function() {
    //多行应用
    var _wrap = $('ul.mulitline'); //定义滚动区域
    var _interval = 5000; //定义滚动间隙时间
    var _moving; //需要清除的动画
    _wrap.hover(function() {
        clearInterval(_moving); //当鼠标在滚动区域中时,停止滚动
    },
    function() {
        _moving = setInterval(function() {
            var _field = _wrap.find('li:first'); //此变量不可放置于函数起始处,li:first取值是变化的
            var _h = _field.height(); //取得每次滚动高度
            _field.animate({
                marginTop: -_h + 'px'
            },
            600,
            function() { //通过取负margin值,隐藏第一行
                _field.css('marginTop', 0).appendTo(_wrap); //隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
            })
        },
        _interval) //滚动间隔时间取决于_interval
    }).trigger('mouseleave'); //函数载入时,模拟执行mouseleave,即自动滚动
});

转载于:https://www.cnblogs.com/xiangniu/archive/2012/05/01/2478326.html