iPhone手機解鎖效果

2024-09-05 12:22:31

字體：大中小

來源：轉載

供稿：網友

iPhone手機解鎖效果，做的挺逼真的仿iPhone手機屏幕解鎖功能，用鼠標拖動箭頭可開鎖，感覺真不錯，特此向作者表示感謝，感謝分享的精神。

<!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(/jscss/demoimg/201206/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(/jscss/demoimg/201206/btn.jpg) no-repeat;}</style><script type="text/javascript"> window.onload = function (){	var iPhone = document.getElementById("iphone");	var oLock = document.getElementById("lock");	var oBtn = oLock.getElementsByTagName("span")[0];	var disX = 0;	var maxL = oLock.clientWidth - oBtn.offsetWidth;	var oBg = document.createElement("img");	oBg.src = "/jscss/demoimg/201206/2.jpg";//預加載下第二張背景，其它沒什么大用。	oBtn.onmousedown = function (e)	{		var e = e || window.event;		disX = e.clientX - this.offsetLeft;				document.onmousemove = function (e)		{			var e = e || window.event;			var l = e.clientX - disX;						l < 0 && (l = 0);			l > maxL && (l = maxL);						oBtn.style.left = l + "px";						oBtn.offsetLeft == maxL && (iPhone.style.background = "url("+ oBg.src +")", oLock.style.display = "none");			return false;		};		document.onmouseup = function ()		{			document.onmousemove = null;			document.onmouseup = null;			oBtn.releaseCapture && oBtn.releaseCapture();						oBtn.offsetLeft > maxL / 2 ?				startMove(maxL, function ()				{					iPhone.style.background = "url("+ oBg.src +")";					oLock.style.display = "none"				}) :				startMove(0)		};		this.setCapture && this.setCapture();		return false	};	function startMove (iTarget, onEnd)	{		clearInterval(oBtn.timer);		oBtn.timer = setInterval(function ()		{			doMove(iTarget, onEnd)		}, 30)	}	function doMove (iTarget, onEnd)	{		var iSpeed = (iTarget - oBtn.offsetLeft) / 5;		iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);		iTarget == oBtn.offsetLeft ? (clearInterval(oBtn.timer), onEnd && onEnd()) : oBtn.style.left = iSpeed + oBtn.offsetLeft + "px"	}};</script></head><body><div   class="70qarhlowxag"   id="iphone"><div   class="70qarhlowxag"   id="lock"><span></SPAN>
</div>
</div>
<div   id="70qarhlowxag"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="70qarhlowxag"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1558248.html'>郵箱登錄快捷導航代碼</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1558250.html'>點擊Div，顯示其innerHTML</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="70qarhlowxag"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

學習交流