JS实现单行文字不间断向上滚动的方法

JavaScript 2018-12-31

本文实例讲述了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，然后再重复上面的动作，就这样不断重复实现不间断滚动。

JS（jQuery）代码：

代码如下:

values.ulHeight){ si=setInterval(function(){ play(); },t2); } } /*鼠标经过ul时暂停滚动*/ function pausePlay(){ controls.rollWrapUl.on({ "mouseenter":function(){ clearInterval(si); }, "mouseleave":function(){ autoplay(); } }); } } new scrollTxt().init();

希望本文所述对大家的javascript程序设计有所帮助。

不间断单行文字向上滚动方法方法