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

前端之家收集整理的这篇文章主要介绍了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,然后再重复上面的动作,就这样不断重复实现不间断滚动。

    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程序设计有所帮助。

    猜你在找的JavaScript相关文章