原生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 相关文章推荐
jQuery 版元素拖拽原型代码
Apr 25 Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
浅谈JavaScript字符集
May 22 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
vue服务端渲染添加缓存的方法
Sep 18 Javascript
Vue开发Html5微信公众号的步骤
Apr 11 Javascript
vue实现列表拖拽排序的功能
Nov 02 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
微信小程序实现文字无限轮播效果
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编写的SVN类
2013/07/18 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
php显示页码分页类的封装
2017/06/08 PHP
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
使用python实现strcmp函数功能示例
2014/03/25 Python
详解Python3 基本数据类型
2019/04/19 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
python反转列表的三种方式解析
2019/11/08 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
函数指针的定义是什么
2016/08/14 面试题
恶搞卫生巾广告词
2014/03/18 职场文书
党员实事承诺书
2014/03/26 职场文书
公务员政审个人总结
2015/02/12 职场文书
小学三年级作文之写景
2019/11/05 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers
MYSQL常用函数介绍
2022/05/05 MySQL