哟西哟西 2016-05-12 15:14 采纳率: 0%
浏览 1093

关于这个手机滑动解锁效果为什么会限制不了，

 <!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条回答 默认 最新

报告相同问题？

悬赏问题

  • ¥15 如何实验stm32主通道和互补通道独立输出
  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题