用javascript实现一个li标签的文字标题上下滚动的效果
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();
});
声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至201542412@QQ.com举报,一经查实,本站将立刻删除。
相关推荐
-
帝国cms首页加载更多,滚动无限加载方法
1,放到首页需要无限加载的地方:[cod]$(function(){varpagnum=1;设置当前页数varzhan_zongpag=0;vartolhight=0;varwan...
-
网站侧边跟随滚动特效
网站侧边跟随滚动特效代码如下[cod]varsidbar=documnt.gtlmntById("guding");varsidbarPos=sidbar.offstTop;window.onscroll=function(){if(...