问题描述
- 关于这个手机滑动解锁效果为什么会限制不了，
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手机解锁效果</title> <style type="text/css"> #phone{ position:relative; width:426px; height:640px; margin:10px auto; background:url(http://fgm.cc/iphone/1.jpg) no-repeat; } #lock{ position:absolute; left:50%; bottom:33px; width:358px; height:62px; margin-left:-179px; } #lock span{ position:absolute; width:93px; height:62px; cursor:pointer; background:url(http://fgm.cc/iphone/btn.jpg) no-repeat; } </style> <script type="text/javascript"> window.onload=function(){ var spa=document.getElementsByTagName("span")[0]; var lock=document.getElementById("lock"); var phone=document.getElementById("phone"); var aPos=[{x:spa.offsetLeft}]; var x1=x2=null; var drag=false; var timer=null; var playtimer=null; var maxL=lock.clientWidth-spa.offsetWidth; spa.onmousedown=function(e){ drag=true; e=event || window.event; e.stopPropagation(); x1=e.clientX-spa.offsetLeft; } spa.onmousemove=function(e){ if (!drag) return; e=event || window.event; e.stopPropagation(); x2=e.clientX-x1; x2 > maxL && (x2=maxL); // x2>(lock.clientWidth-spa.offsetWidth)?(lock.clientWidth-spa.offsetWidth):x2;//右边限定距离 // x2<0 && 0;//限定左边距离 这里为什么限定不了？？ x2 <0 && (x2=0); spa.style.left=x2+"px"; if(x2.offsetLeft==maxL){//这里也限定不了！ phone.style.background="url(http://fgm.cc/iphone/2.jpg)"; lock.style.display="none"; } aPos.push([{x:x2}]); } spa.onmouseup=function(e){ drag=false; e=event || window.event; e.stopPropagation(); x2>(spa.offsetWidth/2)?gohead():stopgo(); } function gohead(){ clearInterval(timer); timer=setInterval(function(){ if(spa.offsetLeft==maxL){//这里也限定不了！ clearInterval(timer); phone.style.background="url(http://fgm.cc/iphone/2.jpg)"; lock.style.display="none"; }else{ spa.style.left=spa.offsetLeft+5+"px"; } },30) } function stopgo(){ if(aPos.length==1) return; playtimer=setInterval(function(){ var oPos=aPos.pop(); oPos ? (oBox.style.left = oPos.x + "px", oBox.style.top = oPos.y + "px"):clearInterval(playtimer); },30)//不知道这里是否能沿之前轨迹返回到最初!! } } </script> </head> <body> <div id="phone"> <div id="lock"><span></span></div> </div> </body> </html>
解决方案
解决方案二：
这么低级的错误。。。
e = event || window.event;
=================>>
e = e || window.event;
时间： 2024-08-29 09:24:46