10行js代码处理滚动公告

2.CSS固定公告牌显示区域的高度（35px），每条公告信息的高度（li）也必须是这个高度（我这里偷懒就用了行高），这个值会以后在js中使用。div,ul,li{margin:0;padding:0}/*先初始化默认样式*/.notice{width:300px;/*单行显示，不隐藏*/height:35px;/*固定通知栏显示区域高度*/padding:030px;背景色：#b3effe；溢出：隐藏；}.noticeulli{列表样式：无；行高：35px；/*以下为单行显示，隐藏之外*/display:block;空白：nowrap；文本溢出：省略号；overflow:hidden;}3.JavaScript封装函数noticeUp.js使用jqueryanimate方法改变列表ul的marginTop值，实现滚动效果；知识点：animate回调函数animate函数执行后，要执行的函数。appendTo()方法在所选元素的末尾（仍在内部）插入指定的内容。注意：如果指定的内容是当前页面中的一些元素，那么这些元素将从它们原来的位置消失。简而言之，这相当于移动操作，而不是复制操作。/**参数说明*obj：动画节点，本例为ul*top：动画高度，本例为-35px；注意向上滚动是一个负数*时间：动画速度，即完成动画所需要的时间，这个例子中需要500毫秒，也就是marginTop从0到到需要500毫秒-35px*function：回调函数，每次动画完成，marginTop归零，此时的第一条消息添加到列表末尾；**/functionnoticeUp(obj,top,time){$(obj).animate({marginTop:top},时间,函数(){$(this).css({marginTop:"0"}).find(":first").appendTo(this);})}4.调用封装函数，首先引入jQuery库和自己的封装插件。使用定时器setInterval来控制显示公告信息的时间间隔。在这个例子中，它是2000毫秒。更多滚动通知方式：另一种VUE滚动我的notification小伙伴的vue实现消息的无缝滚动效果（完美版）weex滚动公告的两种实现方法weex滚动公告weex滚动公告