原生js实现公告滚动效果
更新时间：2021年01月10日 09:52:02 作者：DreamFJ
这篇文章主要为大家详细介绍了原生js实现公告滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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.运行结果
动画在进行中时注意控制不能进行其他动画！
结束语：不要把动画想得很难，当你想实现复杂的动画时，比如jquery的animate方法，你可以先实现针对一个属性的动画，然后再想办法扩展到多个属性（即以对象方式去传参，然后遍历对象中的每个样式属性，然后给每个样式属性添加动画）。以前都是用js去实现每一帧每一帧的移动，即在肉眼无法反应过来的时间里产生移动，这样就能产生连续移动的效果，现在css3出来了，可以方便的利用css3来实现过渡效果了，而不用复杂的js来实现了。这个真的太棒了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
unknown类型比较谦虚,就和他本身的意思一样,他从不祸害到其他的变量,但是any类型就是那种恶霸,属于什么都不管,谁也不敢管的类型,这篇文章主要给大家介绍了关于TypeScript中unknown与any区别的相关资料,需要的朋友可以参考下2021-10-10
要想知道它们是怎么停止的，首先我们要了解它们的运行机制和原理，下面是具体的介绍。2011-01-01
在ES6之前我们都使用单引号或者双引号来包裹字符串,当我们想要在字符串中加入变量时,不能直接写在字符串里,而是需要通过字符串拼接的方式来往字符串中加入变量,这篇文章主要给大家介绍了关于JavaScript模板字符串用法的相关资料,需要的朋友可以参考下2022-11-11
我们知道JScript中对象的prototype属性，是用来返回对象类型原型的引用的。2010-04-04
在日常的前端开发工作中，我们会经常的与HTML、javascript、css等语言打交道，和一门真正的语言一样，计算机语言也有它的字母表、语法、词法、编码方式等2008-12-12
这篇文章主要介绍了JavaScript学习总结JS AJAX应用 的相关资料,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了用JS实现简单的登录验证功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-07-07
这篇文章主要来和大家一起探讨一下20 种 JavaScript 技巧和窍门,每种技巧和窍门都有通俗易懂的示例,让我们一起来提升你的 JavaScript 技能吧2023-10-10
这篇文章主要介绍了JavaScript实现轮播图效果，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下2020-10-10
这篇文章主要介绍了JavaScript 生成唯一ID的几种方式，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2021-02-02
最新评论