原生JS手机解锁与自动锁特效

作者: 幸之石 | 来源:发表于2020-06-08 23:20 被阅读0次

原生JS手机解锁与自动锁特效
Activity提权
焦点日记坚持分享第88天（20190422）
教程篇 | 手机刷机第一步——解除BL锁
android横屏时，解锁屏幕程序自动由竖屛转横屏崩溃的问题
文字特效
等
原来R17光感屏幕指纹技术这么厉害？0.41s瞬间解锁，惹不起！
锁与解锁
20、jQuery 事件机制

1.拖动滑动距离不超过一半松手，自动滑回初始位置
2.拖动滑块到终点会解锁，滑动距离超过一半后松手，会自动滑动到终点，然后解锁屏幕
3.解锁屏幕后，如果不操作，一定时间后会休眠自动上锁，休眠时间可手动设置
效果：

手机解锁与自动锁特效

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<title>iPhoneLock</title>
<style type="text/css">
    #iphone {
        position: relative;
        width: 426px;
        height: 640px;
        margin: 10px auto;
        background: url(iphone.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(unlock_btn.jpg) no-repeat;
    }
    #iphone img{
        opacity: 0;
        display: none;
    }
</style>
</head>
<body>
    <div id="iphone">
        <img src="iphone2.jpg" alt="">
        <div id="lock"><span></span></div>
    </div>
    <script>
        var criticalPoint,autoSleep;
        // TIME设置休眠时间，自动上锁：单位秒
        const TIME=3;
        var time=TIME;
        var iPhone = document.querySelector("#iphone");
        var lock = document.querySelector("#lock");
        var slider = document.querySelector("#lock").firstElementChild;
        var img=document.querySelector("#iphone img");
        // 初始化
        init();
        function init() {
            // 设置滑动临界点
            criticalPoint = (lock.offsetWidth - slider.offsetWidth) / 2;
            slider.addEventListener("mousedown", mouseHandler);
            // 解锁后鼠标移动，按下都会重置休眠时间
            iPhone.addEventListener("mousemove",resetTime);
            iPhone.addEventListener("mousedown",resetTime);
        }
        // 解锁函数
        function unlock() {     
            if(slider.offsetLeft===criticalPoint*2){
                img.style.display="block";
                img.style.opacity="1";
                slider.style.display="none";
                autoSleep=setInterval(autoLock,1000);
            }           
        }
        // 重置自动锁定时间
        function resetTime(){
            time=TIME;          
        }
        // 自动锁函数
        function autoLock(e) {
            time--;
            if(time<0){
                img.style.display="none";
                img.style.opacity="0";
                slider.style.display="block";
                slider.style.left=0;
                clearInterval(autoSleep);
            }   
        }
        // 自动滑动
        function autoMove() {
            if (slider.offsetLeft <=criticalPoint){
                animate(slider,0);
            }else if(slider.offsetLeft>criticalPoint){
                animate(slider,criticalPoint*2,unlock);             
            }   
            }
        // 拖拽
        function mouseHandler(e) {
            if (e.type === "mousedown") {
                e.preventDefault();
                document.div = e.target;
                document.offset = { x: e.offsetX, y: e.offsetY };
                document.addEventListener("mousemove", mouseHandler)
                document.addEventListener("mouseup", mouseHandler)
            } else if (e.type === "mousemove") {
                var sliderLeft = e.clientX - lock.offsetLeft - iPhone.offsetLeft - document.offset.x
                if (sliderLeft <= 0) {
                    sliderLeft = 0;
                } else if (sliderLeft >= criticalPoint*2) {
                    sliderLeft = criticalPoint*2;
                }
                document.div.style.left = sliderLeft + "px";
            } else if (e.type === "mouseup") {
                autoMove();
                document.removeEventListener("mousemove", mouseHandler)
                document.removeEventListener("mouseup", mouseHandler)
            }
        }
        //缓动函数
        function animate(dom, target, fn) {
            clearInterval(dom.timer);
            dom.timer = setInterval(function () {
                var current = dom.offsetLeft;
                var speed = target > current ? Math.ceil((target - current) / 10) : Math.floor((target - current) / 10);
                var next = speed + current;
                if (next == target) {
                    dom.style.left = target + "px"; 
                    clearInterval(dom.timer)            
                    fn && fn()      
                } else {
                    dom.style.left = next + "px";
                }
            }, 1000 / 60)
        }
    </script>
</body>

</html>