之前也没有对这个方法有什么疑惑，直到......先贴代码<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>无缝滚动</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{padding: 0;margin: 0;}
ul,li{list-style: none;}
div{width: 150px;height: 22px;background: #eee;overflow: hidden;}
ul{width: 100px;margin-left: 20px;}
</style>
</head>
<body>
<div id="area">
<ul id="ul1">
<li style="color: red">床前明月光</li>
<li style="color: blue">疑是地上霜</li>
<li style="color: yellow">举头望明月</li>
<li style="color: green">低头思故乡</li>
</ul>
<ul id="ul2"></ul>
</div>
<script>
// var area=document.getElementById("area");
// 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 myscroll=setInterval(scrollUp(),50);
// area.onmouseover=function(){
// clearInterval(myscroll);
// }
// area.onmouseout=function(){
// myscroll=setInterval(scrollUp(),50);
// }
var area=document.getElementById("area");
var ul1=document.getElementById("ul1");
var ul2=document.getElementById("ul2");
ul2.innerHTML=ul1.innerHTML;
var myscroll=setInterval(function(){
if(area.scrollTop >= ul1.offsetHeight){
area.scrollTop=0;
}else{
area.scrollTop++;
}
},50);
area.onmouseover=function(){
clearInterval(myscroll);
}
area.onmouseout=function(){
myscroll=setInterval(function(){
if(area.scrollTop >= ul1.offsetHeight){
area.scrollTop=0;
}else{
area.scrollTop++;
}
},50);
}
</script>
</body>
</html> 注释部分和没有注释部分的唯一区别就是将定时器中函数有无封装，注释中封装成函数sceollUp就总会出错，没有注释的部分也就是将函数直接写进去，就可以正常运行，真的好奇怪，求大佬解惑，感谢！
添加回答
举报
0/150
提交
取消