原生js如何实现公告滚动效果-创新互联

这篇文章主要介绍了原生js如何实现公告滚动效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

发展壮大离不开广大客户长期以来的信赖与支持，我们将始终秉承“诚信为本、服务至上”的服务理念，坚持“二合一”的优良服务模式，真诚服务每家企业，认真做好每个细节，不断完善自我，成就企业，实现共赢。行业涉及成都办公空间设计等，在网站建设、营销型网站、WAP手机网站、VI设计、软件开发等项目上具有丰富的设计经验。js的作用是什么

1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies，包括创建和修改等。7、基于Node.js技术进行服务器端编程。

具体内容如下

1.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>

2.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>

3.js行为

<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>

4.运行结果

原生js如何实现公告滚动效果

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

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

感谢你能够认真阅读完这篇文章，希望小编分享的“原生js如何实现公告滚动效果”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!

文章题目：原生js如何实现公告滚动效果-创新互联
链接地址：https://www.cdcxhl.com/article10/eehgo.html

成都网站建设公司_创新互联，为您提供Google、标签优化、域名注册、网页设计公司、商城网站、网站设计

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容