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

转自: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,即自动滚动
});

  

posted @ 2012-05-01 23:14  象牛  阅读(337)  评论(0编辑  收藏  举报