我有一个很奇怪的问题,函数封装起来就出错!
先贴代码
<!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就总会出错,没有注释的部分也就是将函数直接写进去,就可以正常运行,真的好奇怪,求大佬解惑