原生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 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
JavaScript构造函数详解
Dec 27 Javascript
前端性能优化及技巧
May 06 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
react配置antd按需加载的使用
Feb 11 Javascript
vue 如何使用递归组件
Oct 23 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
php入门小知识
2008/03/24 PHP
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
浅析PHP Socket技术
2013/08/02 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
php实现评论回复删除功能
2017/05/23 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
js实现点击烟花特效
2020/10/14 Javascript
python实现图片批量剪切示例
2014/03/25 Python
简单介绍Python中的JSON模块
2015/04/08 Python
浅析Python基础-流程控制
2016/03/18 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
Python WSGI的深入理解
2018/08/01 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
python使用Geany编辑器配置方法
2020/02/21 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
销售副总经理岗位职责
2013/12/11 职场文书
初中语文教学反思
2014/02/02 职场文书
实习老师离校感言
2014/02/03 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
党支部考察意见范文
2015/06/02 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
python通过函数名调用函数的几种方法总结
2021/06/07 Python
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers