您的位置:首页 > 教程笔记 > 综合教程

用javascript实现一个li标签的文字标题上下滚动的效果

2021-07-21 06:16:25 综合教程 67

html
<li><a href="/" target="_blank"
title="标题文字1">标题文字1</a></li>
<li><a href="/" target="_blank"
title="标题文字122">标题文字122</a></li>
<li><a href="/" target="_blank"
title="标题文字133">标题文字133</a></li>


js
window.addEventListener('load', function() {
var ul = document.querySelector('.infoList');
var lis = ul.querySelectorAll('li');
var liHeight = lis[0].offsetHeight;
var index = 0;
var timer;

function animate() {
index++;
ul.style.transform = 'translateY(-' + index * liHeight + 'px)';
ul.style.transition = 'transform 0.5s';
}

function reset() {
index = 0;
ul.style.transform = 'translateY(0)';
ul.style.transition = 'none';
}

function startAnimation() {
timer = setInterval(function() {
animate();
if (index >= lis.length - 1) {
setTimeout(reset, 500);
}
}, 2000);
}

startAnimation();
});


相关推荐