原生js实现公告滚动效果

本文实例为大家分享了js实现公告滚动展示的具体代码，供大家参考，具体内容如下

1.html结构

 
 

  
我是公告1
  
我是公告2
  
我是公告3
  
我是公告4
 
 

2.css样式

 body,
 div,
 ul,
 li {
  margin: 0;
  padding: 0;
 }
 
 ul,
 li {
  list-style: none;
 }
 
 .notice {
  width: 300px;
  height: 30px;
  border: 1px solid black;
  text-align: center;
  overflow: hidden;
 }
 
 li {
  padding: 3px;
 }
 

3.js行为

4.运行结果

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

结束语：不要把动画想得很难，当你想实现复杂的动画时，比如jquery的animate方法，你可以先实现针对一个属性的动画，然后再想办法扩展到多个属性（即以对象方式去传参，然后遍历对象中的每个样式属性，然后给每个样式属性添加动画）。以前都是用js去实现每一帧每一帧的移动，即在肉眼无法反应过来的时间里产生移动，这样就能产生连续移动的效果，现在css3出来了，可以方便的利用css3来实现过渡效果了，而不用复杂的js来实现了。这个真的太棒了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。