关于这个手机滑动解锁效果为什么会限制不了,
 <!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>

2个回答

这么低级的错误。。。

e = event || window.event;
=================>>
e = e || window.event;

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问