zoukankan      html  css  js  c++  java
  • 仿 腾讯新闻快讯 --无缝滚动

    //无缝滚动
            function AutoScroll(obj) {
                var autoScrollTimer=null,timer=null;
                timer=setTimeout(function(){
                    move();
                },3000);
                function move(){
                    clearTime(autoScrollTimer);
                    var liLen= $(obj).find('li').length;
                    if(liLen === 1){//此处处理只有一条数据时 跳动效果
                        $(obj).find("ul:first").append($(obj).find('li').eq(0).clone())
                    }
                    $(obj).find("ul:first").animate({
                        marginTop: "-25px"
                    }, 500, function() {
                        $(this).css({
                            marginTop: "0px"
                        }).find("li:first").appendTo(this);
                    });
                    autoScrollTimer=window.setTimeout(move,3000);
                }
                function clearTime(time){
                    clearTimeout(time);
                    time=null;
                }
                $(obj).find('li').hover(function(){
                    clearTime(autoScrollTimer);
                },function(){
                    move()
                })
            }
    
     $(function(){
                //无缝滚动
                $(document).ready(function() {
                    AutoScroll("#jvsNotice")//调用
                });
    })
    <div class="jvsNotice" id="jvsNotice">
        <ul>
            <li><a href="#">公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1</a></li>
            <li><a href="#">公告3公告3公告3公告3</a></li>
            <li><a href="#">公告4公告4公告4公告4</a></li>
            <li><a href="#">公告5公告5</a></li>
            <li><a href="#">公告6公告6</a></li>
            <li><a href="#">公告7公告7公告7</a></li>
            <li><a href="#">公告8公告8公告8公告8</a></li>
        </ul>
    </div>
    *{margin:0;padding:0;}
              
      ul,ol,dl{
                list-style: none;
            }
            .jvsNotice {
                height: 25px;
                line-height: 25px;
                border: #ccc 1px solid;
                overflow: hidden;
            }
            .jvsNotice>ul{
                padding-left: 0;
                overflow: hidden;
            }
            .jvsNotice li {
                height: 25px;
                padding-left: 10px;
                text-align: center;
                white-space: nowrap;
            }
  • 相关阅读:
    python的metaclass
    鱼和水的故事
    iOS的QuickTime Plugin
    二进制/十六进制转浮点数的编程(互转类似)
    Android开发常见错误及技巧
    Mac 热键大全
    Java动态程序设计:反射介绍
    注册asp.net 4.0 到iis
    javascript常用判断写法
    将存储过程执行的结果保存到临时表
  • 原文地址:https://www.cnblogs.com/dongxiaolei/p/9687572.html
Copyright © 2011-2022 走看看