                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /信息滚动效果制作

这段代码如何实现鼠标移入时停止滚动，移出时继续滚动

<!DOCTYPE html>

<html>

<head>

*{margin: 0;padding:0;}

.bg{background: #345;border-radius: 20px;width: 350px;margin: 0 auto;font-family: "微软雅黑";color: #9cf;}

#box{height: 144px;overflow: hidden;}

#box ul{list-style: none;margin-left: 40px}

#box ul li{line-height: 25px;cursor: pointer;}

</style>

</head>

<body>

<li>算一算虚度了多少个年头</li>

<li>仿佛足够写一套错爱的春秋</li>

<li>如果以后你还想为谁</li>

<li>浪费美好时候</li>

<li>眼泪只能在我的胸膛</li>

<li>互相折磨到白头</li>

<li>悲伤坚决不放手</li>

<li>开始纠缠之后</li>

<li>才又被人放大了自由</li>

<li>你的暴烈太温柔</li>

<li>感情又痛又享受</li>

</ul>

</div>

var box=document.getElementById('box'),

con1=document.getElementById('con1'),

con2=document.getElementById('con2'),

aLi=document.getElementsByTagName('li'),

h=25,//行高

timer,//计时器

timeo,

speed=30,//速度

delay=2000;//延时

con2.innerHTML=con1.innerHTML;

function startMove(){

box.scrollTop++

timer=setInterval(judge,speed)

}

function judge(){

if(box.scrollTop%h==0){

clearInterval(timer)

timeo=setTimeout(startMove,delay)

}

else{

box.scrollTop++

}

if(box.scrollTop>=con1.offsetHeight){

box.scrollTop=0

}

var timeo=setTimeout(startMove,delay)//初始化

var flag=0

for(var i=0;i<aLi.length;i++){

aLi[i].onmouseover=function(){

this.style.color="yellow";

//待补充

}

aLi[i].onmouseout=function(){

this.style.color="";

//待补充

}

</script>

</body>

</html>

Mycat_

2016-08-11

源自：信息滚动效果制作 3-3

关注问题我要回答

4895

操作

收起

4 回答

Accidie漠然回答被采纳 +3 积分
2016-08-12

for(var i=0;i<aLi.length;i++){
       aLi[i].onmouseover=function(){
           this.style.color="yellow";
           clearInterval(timer);
           clearTimeout(timeo);
//待补充
       }
       aLi[i].onmouseout=function(){
           this.style.color="";
           startMove();
//待补充
       }
   }
将for循环里的语句修改成如上即可.

将for循环里的语句替换为上面的语句即可.

0 回复有任何疑惑可以回复我~

收起回答

Mycat_ 提问者

非常感谢！

2016-08-12 回复有任何疑惑可以回复我~

Mycat_ 提问者
2016-09-01

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.bg{background: #345;border-radius: 20px;width: 350px;margin: 0 auto;font-family: "微软雅黑";color: #9cf;}
#box{height: 160px;overflow: hidden;}
#box ul{list-style: none;margin-left: 40px}
#box ul li{line-height: 25px;cursor: pointer;}
</style>
</head>
<body>
<div class="bg">
<div id="box">
<ul id='con1'>
<li>算一算虚度了多少个年头</li>
<li>仿佛足够写一套错爱的春秋</li>
<li>如果以后你还想为谁</li>
<li>浪费美好时候</li>
<li>眼泪只能在我的胸膛</li>
<li>毫无保留</li>
<li>互相折磨到白头</li>
<li>悲伤坚决不放手</li>
<li>开始纠缠之后</li>
<li>才又被人放大了自由</li>
<li>你的暴烈太温柔</li>
<li>感情又痛又享受</li>
</ul>
<ul id='con2'></ul>
</div>
</div>

<script type="text/javascript">
var box=document.getElementById('box'),
con1=document.getElementById('con1'),
con2=document.getElementById('con2');
con2.innerHTML=con1.innerHTML;

function scrollUp() {
if(box.scrollTop>=con1.offsetHeight){
box.scrollTop=0;
}
else{
box.scrollTop++
}
}
box.timer=setInterval(scrollUp,50)

function color(){
var oLi=document.getElementsByTagName('li');
for(var i=0;i<oLi.length;i++){
oLi[i].onmouseover=function(){
this.style.color="yellow"
clearInterval(box.timer)
}
oLi[i].onmouseout=function(){
this.style.color="";
box.timer=setInterval(scrollUp,50);
}
}
}
color()
</script>
</body>
</html>