原生JS实现公告无缝滚动效果

原生JS实现公告滚动效果概述

本文分享了一段使用JavaScript实现公告栏滚动展示的具体代码示例，供读者参考学习。

HTML结构搭建

首先构建HTML基础结构。

<body>
 <div id="notice" class="notice">
 <ul id="noticeList">
  <li>我是公告1</li>
  <li>我是公告2</li>
  <li>我是公告3</li>
  <li>我是公告4</li>
 </ul>
 </div>
</body>

CSS样式定义

接着定义CSS样式以控制外观。

<style type="text/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;
 }
 </style>

JavaScript逻辑实现

然后编写JavaScript代码实现交互逻辑。

<script type="text/javascript">
 window.onload = function() {
  var notice = document.getElementById("notice");
  var noticeList = document.getElementById("noticeList");
 
  // 获取ul下第一个li元素，好计算li的高度，因为后面滚动的时候每次要滚动一个高度，这里li都是一样高的，
  // 所以获取第一个的高度就行了，不然要遍历获取每一个li的高度。
  var noticeFirstItem = noticeList.querySelector("li");
 
  // 获取li的高度，这里获取的是offsetHeight，关于js各种高度的定义可以注意以下
  var scrollHeight = noticeFirstItem.offsetHeight;
  // 是否可以进行动画
  var opt = {
  animated: true,
  interval: 1000
  };
 
  notice.onclick = function() {
  // 动画之前首先重置
  // noticeFirstItem.style.transition = "";
  noticeFirstItem.style.marginTop = 0;
  if (opt.animated) {
   opt.animated = false;
   animate(noticeList, scrollHeight, opt);
  }
  };
 };
 
 // 动画函数，obj——要产生动画的对象，sHeight——每次要滚动的距离，interval——多久滚动一次
 function animate(obj, sHeight, option) {
  // 当滚到最后一条公告的时候就不用动画了。
  var stopHeight = 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";
  // 注意这里的比较符号，前面得到的高度都进行四舍五入了
  if (marginTopNum <= stopHeight) {
   clearInterval(timer);
   // option.animated = true;
  }
  }, option.interval);
 }
 </script>

运行结果展示

最后查看运行效果。

动画状态控制要点

在动画执行期间，需严格控制状态，防止其他动画同时触发导致冲突。

技术总结与展望

总结而言，实现复杂动画并非难事。以jQuery的animate方法为例，其核心思路是先实现单属性动画，再扩展至多属性（通过对象传参并遍历处理）。过去常采用逐帧移动的方式，利用人眼视觉暂留原理实现连续运动；如今CSS3提供了便捷的过渡效果，可大幅简化JS代码，提升开发效率。

结语

希望本文内容能对各位的学习有所帮助，欢迎继续支持本站。