仿 腾讯新闻快讯 --无缝滚动

//无缝滚动
        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;
        }

 

posted @ 2018-09-21 17:20  dongxiaolei  阅读(413)  评论(0编辑  收藏  举报