AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

javascript实现文字无缝滚动

51自学网 http://www.wanshiok.com
js文字无缝滚动,js无缝滚动,js文字上下滚动

效果如图:

html:( 一个div 包裹两个ul )

 <div style="position: absolute; left: 500px; top: 200px; background-color: white;  height: 140px; width: 400px; border: solid; 1px; overflow: hidden;" id="box"> <ul id="ul1"> <li><a href="#">1.学会html5 绝对的屌丝逆袭(案例)</a><span>2013-09-18</span></li> <li><a href="#">2.tab页面切换效果(案例)</a><span>2013-10-09</span></li> <li><a href="#">3.圆角水晶按钮制作(案例)</a><span>2013-10-21</span></li> <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li> <li><a href="#">5.分页页码制作(案例)</a><span>2013-11-06</span></li> <li><a href="#">6.导航条菜单的制作(案例)</a><span>2013-11-08</span></li> <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li> <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li> <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>  </ul> <ul id="ul2"></ul>  </div>

js代码:

window.onload=roll;function roll(){ var ul1=document.getElementById("ul1"); var ul2=document.getElementById("ul2"); var box=document.getElementById("box"); ul2.innerHTML=ul1.innerHTML; box.scrollTop = 0; var timer=setInterval(rollStart,50); box.onmouseover=function(){  clearInterval(timer) } box.onmouseout=function(){  timer=setInterval(rollStart,50); } } function rollStart(){ if (box.scrollTop>=ul1.scrollHeight) {//scrollTop属性既是scroll最上端和box的距离  box.scrollTop=0; }else{  box.scrollTop++; }  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持wanshiok.com。


js文字无缝滚动,js无缝滚动,js文字上下滚动  
上一篇:获取当前月(季度/年)的最后一天(set相关操作及应用)  下一篇:JavaScript仿聊天室聊天记录