原生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 相关文章推荐
最短的IE判断代码
Mar 13 Javascript
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
JavaScript canvas实现流星特效
May 20 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
关于crontab的使用详解
2013/06/24 PHP
php中namespace use用法实例分析
2016/01/22 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
jquery 可排列的表实现代码
2009/11/13 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
快速入门Vue
2016/12/19 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
Python异常处理操作实例详解
2018/08/28 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
new修饰符是起什么作用
2015/06/28 面试题
品质管理部岗位职责范文
2014/03/01 职场文书
教堂婚礼主持词
2014/03/14 职场文书
员工2014年度工作总结
2014/12/09 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
培训心得体会怎么写
2016/01/25 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL