手机解锁

浅浅的花香味﹌ 2022-06-05 08:17 272阅读 0赞

![这里写图片描述][SouthEast]

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
    
                <style type="text/css"> #container{ position: relative;align-content: center;} img{ position: absolute;} #unlock{ top:546px;left: 28px;border-radius: 10px;} </style>
    
    
                <script type="text/javascript"> onload = function(){ var unclick = document.getElementById("unlock"); unclick.onmousedown = function(event){ //offsetX 在本元素中偏移 var offsetX = event.offsetX; var offsetY = event.offsetY; document.onmousemove = function(event){ var clientX = event.clientX; var clientY = event.clientY; //用页面的坐标减去元素里面的坐标,就是锁的坐标 //加判断,把箭头固定在开锁框里 var resultX = clientX - offsetX; if(resultX > 302){ //开锁,并把锁固定在结束位置 resultX = 302; }else if(resultX < 28){ //关闭锁,返回锁的起始位置 resultX = 28; } //锁的位置 unclick.style.left = resultX + 'px'; } //鼠标抬起事件 document.onmouseup = function(){ //不跟随鼠标移动 document.onmousemove = null; //获取箭头到解锁框的长度,并加判断 var left = window.getComputedStyle(unlock,null).left; if(parseInt(left) < 300){ alert("解锁未完成"); unlock.style.left = "28px"; }else{ alert('解锁成功'); } } } } </script>
    
        </head>
        <body>
    
    
    
            <div id="container">
    
                <img id="iphone" src="img/img/iphone.jpg" draggable="false"/>
    
                <img id="unlock" src="img/img/unlock_btn.jpg" draggable="false"/>
    
            </div>
        </body>
    </html>

[SouthEast]: /images/20220605/719ea92da79140cd999c3bbde96935e9.png