zoukankan      html  css  js  c++  java
  • 【转】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,即自动滚动
    });
    

      

  • 相关阅读:
    Google
    LeetCode 664. 奇怪的打印机
    LeetCode 79. 单词搜索
    LeetCode 224. 基本计算器
    Windows 端口映射
    LeetCode 354. 俄罗斯套娃信封问题
    LeetCode 300. 最长递增子序列
    LeetCode 338. 比特位计数
    LeetCode 395. 至少有K个重复的最长子串
    LeetCode 424. 替换后的最长重复字符
  • 原文地址:https://www.cnblogs.com/xiangniu/p/2478326.html
Copyright © 2011-2022 走看看