原生js实现文字滚动效果
文字滚动效果
文字滚动效果需求:
这是一个比较简单的小案例,就是文字上下滚动出来,有这个过渡效果就行了。
直接开干
代码:
html和css
比较简单,直接上代码
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字滚动效果</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="container">
<div class="left nav-left">
<p>文字滚动效果</p>
</div>
<ul class="left">
<li>欢迎你!</li>
<li>北京欢迎你!</li>
<li>安徽欢迎你!</li>
<li>合肥欢迎你!</li>
</ul>
</div>
<script src="./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的dom
var item = $('ul');
// console.log(item);
function newItem() {
// 获取第一个li
var newitem = item.children[0];
// console.log(newitem);
// 复制获取的第一个li
var 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;
// 当前显示的li
var currentli = 0;
// 列表滚动到下一项
function moveNext() {
// 第一次的高度
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)
}
})();
若有错误,敬请指正