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

时间: 作者:事总

  

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

  

本文实例讲述了JS实现单行文字不间断向上滚动的方法。分享给大家供大家参考。具体分析如下:  

  

前几天帮一个朋友写了一个单行文字不间断向上滚动的JS效果,现在分享给需要的weber。先看HTML和CSS代码:  

  

CSS:  
  
代码如下:

.wrap{padding:10px;border:1px #ccc solid; width:500px;margin:20px auto;}  
  .roll-wrap{height:130px;overflow:hidden;}
  

  

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)代码:  
  
代码如下:

function scrollTxt(){  
  var controls={},  
  values={},  
  t1=200, /*播放动画的时间*/  
  t2=2000, /*播放时间间隔*/  
  si;  
  controls.rollWrap=$("#roll-wrap");  
  controls.rollWrapUl=controls.rollWrap.children();  
  controls.rollWrapLIs=controls.rollWrapUl.children();   (责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | 关于我们 | 新闻资讯 | 联系方式

Copyright © 2018-2019 金洋娱乐平台 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 金洋娱乐平台