原生JS手机解锁与自动锁特效
2020-06-08 本文已影响0人
幸之石
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>
