原生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插入节点appendChild insertBefore使用方法
Jul 04 Javascript
jquery分页对象使用示例
Apr 01 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 Javascript
正则表达式基础与常用验证表达式
Jun 16 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
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
js中的闭包实例展示
2018/11/01 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
js实现网页随机验证码
2020/10/19 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
python实现定制交互式命令行的方法
2014/07/03 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
会议欢迎词范文
2015/01/27 职场文书
经理助理岗位职责
2015/02/02 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
四群教育工作总结
2015/08/10 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书