超简易 消息通知滚动 pc移动适用

<div class="l-o-guang" id="l-o-guang" style="overflow: hidden;">
   <ul id="clik-infor" style="margin-top: 0px;">
       <li data-url="" data-content="">联盟联合微博发起活动~！</li>
       <li data-url="" data-content="">高级运营都收藏了联盟淘客推广渠道！</li>
   </ul>
</div>

js

<script type="text/javascript">
            //公告
            //获取外部盒子
            var view = $('#l-o-guang'),
            //外部盒子的高度
                viewH = view.height(),
                //找到运动的盒子
                list = view.find('ul');
                //执行函数动画
                function play(){
                    list.stop().animate({'marginTop': -viewH+'px'},800, function(){
                        list.append(list.children().first())
                        list.css('marginTop', 0)
                    })
                }
           setInterval(play,5000);
</script>

总结：实现方法就是让运动的盒子每次执行负像素往上走，之后立即获取第一个也就是上去的li 移动到最后位置 ，运动盒子立即回来，重复的操作动画（

append()方法重点

）。

转载于:https://www.cnblogs.com/xiaobaicai123/p/11584539.html