模拟苹果手机开锁功能

最新推荐文章于 2021-11-17 17:22:37 发布

Cc.＇沐艿伊℡

最新推荐文章于 2021-11-17 17:22:37 发布

阅读量337

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_44899153/article/details/90614602

版权

web 专栏收录该内容

53 篇文章

订阅专栏

模拟苹果手机开锁功能

效果图
在这里插入图片描述
滑动底部滑轮，等底部滑轮划到底之后就会开锁，效果图如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>iPhone手机解锁效果</title>
    <style type="text/css">
        #iphone{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>

</head>
<body>
<div id="iphone">
    <div id="lock"><span id="hua"></span></div>
    <script src="common.js"></script>
    <script>
        myId("hua").onmousedown=function(e){
            // console.log(myId("lock").offsetLeft);
            var space=e.clientX-myId("lock").offsetLeft-myId("iphone").offsetLeft;
            console.log(space);
            document.onmousemove=function(e){
                var x=e.clientX-space-myId("lock").offsetLeft-myId("iphone").offsetLeft;
                x=x>0?x:0;
                x=x>myId("lock").offsetWidth-myId("hua").offsetWidth?myId("lock").offsetWidth-myId("hua").offsetWidth:x;
                moveStyle(myId("hua"),"left",x);
                console.log(parseInt(myId("hua").style.left));
                console.log(myId("lock").offsetWidth - myId("hua").offsetWidth);
                if(parseInt(myId("hua").style.left)==myId("lock").offsetWidth-myId("hua").offsetWidth+1){
                    myId("iphone").style.background="url(http://fgm.cc/iphone/2.jpg)";
                    myId("hua").style.display="none";
                }
            }
        }
        document.onmouseup=function(){
            if(!(parseInt(myId("hua").style.left)==myId("lock").offsetWidth-myId("hua").offsetWidth)){
                moveStyle(myId("hua"),"left",0);
            }
            document.onmousemove="";
        }

    </script>
</div>
</body>
</html>

调用的动态滑动函数的代码

//style 单个属性值变速移动
//目标对象 ， target == style中的样式名(字符串) ， 目标值(Number)
function moveStyle(element,target,move_x){
	clearInterval(element.way);
	element.way = setInterval(function(){
		//getStyle(element,target)  是一个字符串 .. 100px;
		var tarStyle = parseInt(getStyle(element,target));
		var step = (move_x - tarStyle)/10;
		step = step > 0 ? Math.ceil(step) : Math.floor(step);
		// tarStyle 类型(Number);
		tarStyle += step;
		// 移动
		element.style[target] = tarStyle+"px";
		if(tarStyle == move_x){
			clearInterval(element.way);
		}
	},10)
}