                        課程
                    
                        /前端開發
                        
                            /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

關注問題我要回答

4932

操作

收起

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>