您的位置：首页 > Web前端 > JavaScript

JS实现文字滚动效果

2016-09-23 18:53 796 查看

分别实现无缝滚动和间歇滚动

间歇滚动有问题_(:зゝ∠)_，第一个ul的正常滚动，到第二个的时候就开始无缝滚动，目前没找到问题在哪里，找到会进行修改

效果图

代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
#scrollBox{
width:300px;
height:200px;
overflow:hidden;
border:3px solid green;
margin:20px auto;
text-align:center;
}
#scrollBox1{
width:300px;
height:200px;
overflow:hidden;
border:3px solid green;
margin:20px auto;
text-align:center;
}
ul li{
list-style-type:none;
line-height:30px;
font-size:24px
            height:30px;
width:100%;
}
p{
text-align:center;
}
</style>
</head>
<body>
<br>
<br>
<p>无缝滚动</p>
<div id="scrollBox">
<ul id="ul1">
<li>第1条滚动信息_(:зゝ∠)_</li>
<li>第2条滚动信息_(:зゝ∠)_</li>
<li>第3条滚动信息_(:зゝ∠)_</li>
<li>第4条滚动信息_(:зゝ∠)_</li>
<li>第5条滚动信息_(:зゝ∠)_</li>
<li>第6条滚动信息_(:зゝ∠)_</li>
<li>第7条滚动信息_(:зゝ∠)_</li>
<li>第8条滚动信息_(:зゝ∠)_</li>
<li>第9条滚动信息_(:зゝ∠)_</li>
<li>第10条滚动信息_(:зゝ∠)_</li>
<li>第11条滚动信息_(:зゝ∠)_</li>
<li>第12条滚动信息_(:зゝ∠)_</li>
</ul>
<ul id="ul2"></ul>
</div>
<p>间歇滚动</p>
<div id="scrollBox1">
<ul id="ul11">
<li>第1条滚动信息_(:зゝ∠)_</li>
<li>第2条滚动信息_(:зゝ∠)_</li>
<li>第3条滚动信息_(:зゝ∠)_</li>
<li>第4条滚动信息_(:зゝ∠)_</li>
<li>第5条滚动信息_(:зゝ∠)_</li>
<li>第6条滚动信息_(:зゝ∠)_</li>
<li>第7条滚动信息_(:зゝ∠)_</li>
<li>第8条滚动信息_(:зゝ∠)_</li>
<li>第9条滚动信息_(:зゝ∠)_</li>
<li>第10条滚动信息_(:зゝ∠)_</li>
<li>第11条滚动信息_(:зゝ∠)_</li>
<li>第12条滚动信息_(:зゝ∠)_</li>
</ul>
<ul id="ul22"></ul>
</div>
<script>
//无缝滚动
var area=document.getElementById("scrollBox");
var ul1=document.getElementById("ul1");
var ul2=document.getElementById("ul2");
ul2.innerHTML=ul1.innerHTML;
function scrollUp(){
if(area.scrollTop>ul1.offsetHeight){
area.scrollTop=0;
}else{
area.scrollTop++;
}
}
var speed=50;
var myScroll=setInterval('scrollUp()',speed);
area.onmouseover= function () {
clearInterval(myScroll);
};
area.onmouseout= function () {
myScroll=setInterval('scrollUp()',speed);
};
//间歇滚动
var area1=document.getElementById("scrollBox1");
var ul11=document.getElementById("ul11");
var ul22=document.getElementById("ul22");
ul22.innerHTML=ul11.innerHTML;
var iHeight=30;
var speed1=50;
var delay=2000;
area1.scrollTop=0;
var time;
function startMove()
{
area1.scrollTop++;
time=setInterval("scrollUp1()",speed1);
}
function scrollUp1(){
area1.scrollTop++;
if(area1.scrollTop%iHeight==0){
clearInterval(time);
setTimeout("startMove()",delay);
}else{
area1.scrollTop++;
if(area1.scrollTop>=area1.scrollHeight/2){
area1.scrollTop=0;
}
}
}
setTimeout("startMove()",delay);

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web前端

相关文章推荐

新的分享

章节导航