javascript实现文字无缝滚动

编程学习 2021-07-04 19:20www.dzhlxh.cn编程入门
这篇文章主要介绍了javascript实现文字无缝滚动,文字可以实现上下滚动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

效果如图:

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++;
 } 
 }

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

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板