原生js实现公告滚动效果

这个例子分享了js实现公告滚动显示的具体代码，供大家参考。具体内容如下

1.html结构

body div id=' notice ' class=' notice ' ul id=' notice list ' LiI是公告1/li liI是公告2/li liI是公告3/li liI是公告4/li /ul /div/body2.css样式

style type='text/css' body，div，ul，Li { margin 3360 0；padd : 0；} ul，Li { list-style : none；} .请注意{ width: 300pxheight: 30pxborder: 1px纯黑；文本对齐：中心；飞越：隐藏；} li { padding: 3px} /style3.js行为

脚本类型=' text/JavaScript ' window . onload=function(){ var notice=document . getelementbyid(' notice ')；var noticillist=document . getelementbyid(' noticillist ')；//得到ul下的第一个li元素，从而计算li的高度，因为以后滚动的时候，一次要滚动一个高度，这里li是同一个高度。//所以只需要得到第一个高度，或者遍历得到每个li的高度。var notifierstitem=notifiest . queryselector(' Li ')；//得到李的高度，这里是偏右。关于js各种高度的定义，请注意下面的var scroll height=noticefilestitem . offset theight；//可以动画化varopt={动画化： true，间隔： 1000 }；notice . onclick=function(){//Reset//notifyfirst item。风格。过渡=' '在动画之前；noticeFirstItem . style . marginTop=0；if (opt .动画){ opt .动画=false动画(注意列表、滚动高度、选项)；} };};//动画函数，obj——要动画的对象，sHeight——每次滚动的距离，interval——滚动函数动画的频率(obj，sheight，option){//最后一个公告滚动时，不需要动画。var stop height=Sheight-obj . scrollHeight；var marginTopNum=0；var timer=setInterval(function(){ marginTopNum-=sHeight；obj . style . margintop=marginTopNum ' px '；obj . style . transition=' margin-top 1.5s ease '；//注意这里的比较符号。如果(margin topnum=stop height){ clear interval(timer)，则以上获得的高度被四舍五入；//option . animated=true；} }，option . interval)；} /script4。运行结果

动画进行时，注意控制不能进行其他动画！

结论：动画不要想太多。当想要实现复杂的动画时，比如jquery的animate方法，可以先为一个属性实现动画，然后尝试扩展到多个属性(即按对象传递参数，然后遍历对象中的每个样式属性，再为每个样式属性添加动画)。过去用js实现每一帧的运动，即在肉眼无法反应的时间内运动，从而产生连续运动的效果。现在css3已经出来了，不用复杂的js，用css3实现过渡效果很方便。这真的很棒。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。