原生js实现公告滚动效果


Posted in Javascript onJanuary 10, 2021

本文实例为大家分享了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来实现了。这个真的太棒了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js的MessageBox
Dec 03 Javascript
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
jcrop基本参数一览
Jul 16 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
微信小程序实现文字无限轮播效果
Dec 28 #Javascript
小程序实现左右来回滚动字幕效果
Dec 28 #Javascript
原生JS实现的自动轮播图功能详解
Dec 28 #Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 #jQuery
微信小程序实现简单跑马灯效果
May 26 #Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 #Javascript
详解puppeteer使用代理
Dec 27 #Javascript
You might like
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
杏林同学录(九)
2006/10/09 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
小程序双头slider选择器的实现示例
2020/03/31 Javascript
在Django的URLconf中使用命名组的方法
2015/07/18 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
深入分析python 排序
2020/08/24 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
同学会主持词
2014/03/18 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
条幅标语大全
2014/06/20 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
开除通知书范本
2015/04/25 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书