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


    //无缝滚动
            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;
            }
  • 相关阅读:
    在vue项目中使用stylus来实现移动端的1px
    Promise对象和回调函数,解决异步数据传递问题
    axios在实际项目中的使用介绍
    关于React.PropTypes的废除,以及新版本下的react的验证方式
    javascript之日期对象
    js Date 日期格式化(转)
    jquery无缝隙连续滚动代码
    8款惊艳的HTML5粒子动画特效
    web前端设计师们常用的jQuery特效插件汇总
    js/jQuery实现类似百度搜索功能
  • 原文地址:https://www.cnblogs.com/dongxiaolei/p/9687572.html
Copyright © 2020-2023  润新知