前端之家收集整理的这篇文章主要介绍了
JS实现单行文字不间断向上滚动的方法,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
本文实例讲述了JS实现单行文字不间断向上滚动的方法。分享给大家供大家参考。具体分析如下:
前几天帮一个朋友写了一个单行文字不间断向上滚动的JS效果,现在分享给需要的weber。先看HTML和CSS代码:
CSS:
HTML:
JS文本向上滚动1
JS文本向上滚动2
JS文本向上滚动3
JS文本向上滚动4
JS文本向上滚动5
JS文本向上滚动6
JS文本向上滚动7
的原理是 先将ul向上滚动一个li的高度,滚动完后将ul里面的第一个li放到ul的末尾,这时原第二个li变成了ul里面的第一个li,然后再重复上面的动作,就这样不断重复实现不间断滚动。
values.ulHeight){
si=setInterval(function(){
play();
},t2);
}
}
/*鼠标经过ul时暂停滚动*/
function pausePlay(){
controls.rollWrapUl.on({
"mouseenter":function(){
clearInterval(si);
},
"mouseleave":function(){
autoPlay();
}
});
}
}
new scrollTxt().init();