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

报告相同问题？

悬赏问题

  • ¥20 求用stm32f103c6t6在lcd1206上显示Door is open和password：
  • ¥15 apm2.8飞控罗盘bad health，加速度计校准失败
  • ¥15 求解O-S方程的特征值问题给出边界层布拉休斯平行流的中性曲线
  • ¥15 谁有desed数据集呀
  • ¥20 手写数字识别运行c仿真时，程序报错错误代码sim211-100
  • ¥15 关于#hadoop#的问题
  • ¥15 (标签-Python|关键词-socket)
  • ¥15 keil里为什么main.c定义的函数在it.c调用不了
  • ¥50 切换TabTip键盘的输入法
  • ¥15 可否在不同线程中调用封装数据库操作的类