文章目录
原生js实现文字滚动效果
文字滚动效果
文字滚动效果需求：
这是一个比较简单的小案例，就是文字上下滚动出来，有这个过渡效果就行了。
直接开干
代码：
html和css
比较简单，直接上代码
html:
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>文字滚动效果</title><linkrel="stylesheet"href="./index.css"></head><body><divclass="container"><divclass="left nav-left"><p>文字滚动效果</p></div><ulclass="left"><li>欢迎你！</li><li>北京欢迎你！</li><li>安徽欢迎你！</li><li>合肥欢迎你！</li></ul></div><scriptsrc="./index.js"></script></body></html>
css:
*{padding: 0;margin: 0;box-sizing: border-box;}.container{background-color: cadetblue;overflow: hidden;padding: 20px 0px;}.left{float: left;}.nav-left p{font-size: 15px;padding-left: 20px;margin-top: 10px;border-right: 2px solid blue;padding-right: 20px;}ul{padding-left: 30px;list-style: none;height: 40px;overflow: hidden;}ul li{height: 40px;line-height: 40px;}
js
js部分也是比较好写的，我们只要获取到ul的dom，先把ul中第一项复制一下然后重新添加进ul中，等于多加一项，然后就可以开始动画部分
首先是定义计时器的时间，然后是每一个li的高度，然后设置一个计时器，以及当前显示的li，然后计时器中的函数写第一次的高度，最终的高度，以及li改变的高度，等等，这一部分再代码中有体现，我就不多介绍了，直接上代码了。
js:
// 封装一个获取dom的函数function$(selector){return document.querySelector(selector);}(function(){// 获取ul的domvar item =$('ul');// console.log(item);functionnewItem(){// 获取第一个livar newitem = item.children[0];// console.log(newitem);// 复制获取的第一个livar newli = newitem.cloneNode(true);// console.log(newli);// 添加进ul
item.appendChild(newli);// console.log(item);}newItem();/**动画 */// 定义计时器的时间var interval =1000;setInterval(moveNext, interval);// 每一个li的高度var itemHeight =40;// 当前显示的livar currentli =0;// 列表滚动到下一项functionmoveNext(){// 第一次的高度var form = itemHeight * currentli;// li变为下一个
currentli++;// li改变后的高度var formli = itemHeight * currentli;// 变化的总时间var totalTime =400;// 变化一次的时间var oneTime =20;// 变化的次数var changeNumber = totalTime / oneTime;// 变化高度var changeAmount =(formli - form)/ changeNumber;// 计时器var timerId =setInterval(function(){
form += changeAmount;if(form >= formli){clearInterval(timerId);if(currentli === item.children.length -1){
form =0;
currentli =0;}}
item.scrollTop = form;}, oneTime)}})();
若有错误，敬请指正
标签：
javascript
本文转载自: https://blog.csdn.net/qq_56745273/article/details/124002338
版权归原作者 前端小贺 所有， 如有侵权，请联系我们删除。
版权归原作者 前端小贺 所有， 如有侵权，请联系我们删除。