1.拖動滑動距離不超過一半松手，自動滑回初始位置
2.拖動滑塊到終點會解鎖让网，滑動距離超過一半后松手，會自動滑動到終點师痕，然后解鎖屏幕
3.解鎖屏幕后溃睹，如果不操作，一定時間后會休眠自動上鎖胰坟，休眠時間可手動設(shè)置
效果：
手機(jī)解鎖與自動鎖特效
<!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設(shè)置休眠時間因篇，自動上鎖：單位秒
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() {
// 設(shè)置滑動臨界點
criticalPoint = (lock.offsetWidth - slider.offsetWidth) / 2;
slider.addEventListener("mousedown", mouseHandler);
// 解鎖后鼠標(biāo)移動，按下都會重置休眠時間
iPhone.addEventListener("mousemove",resetTime);
iPhone.addEventListener("mousedown",resetTime);
}
// 解鎖函數(shù)
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;
}
// 自動鎖函數(shù)
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)
}
}
//緩動函數(shù)
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>
