javascript实现文字无缝滚动
发布于 2017-06-27 07:17:55 | 132 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Javascript教程，程序狗速度看过来！
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
这篇文章主要介绍了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++;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phperz。
推荐阅读
最新资讯