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

      

  • 相关阅读:
    React组件的生命周期
    机器人api
    智能机器人
    已复制该虚拟机 之后需要的处理工作
    在虚拟机上安装CentOS6.5(minimal)
    fastdfs
    redis安装
    FtpClient上传文件异常:java.net.SocketException: Connection reset
    redis的学习笔记
    git命令2
  • 原文地址:https://www.cnblogs.com/xiangniu/p/2478326.html
Copyright © 2011-2022 走看看