<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Iphone解锁</title>
<style>
#iph{position:relative;width:426px;height:640px;margin:10px auto;background:url(http://fgm.cc/iphone/1.jpg) no-repeat;}
#lo{position:absolute;left:50%;bottom:33px;width:358px;height:62px;margin-left:-179px;}
#lo span{position:absolute;width:93px;height:62px;cursor:pointer;background:url(http://fgm.cc/iphone/btn.jpg) no-repeat;z-index:3;}
#loword{position:absolute;color:#FFF;transform:scaleX(0.99);left:110px;font:200 26px/63px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;}
.op{opacity:0.7;}
</style>
<script>
window.οnlοad=function(){
var iphone=document.getElementById("iph");
var locolk=document.getElementById("lo");
var oBtn=locolk.getElementsByTagName("span")[0];
var disX=0;
var maxL=locolk.clientWidth- oBtn.offsetWidth;//获取最大的left值，PS也就是obtn到了最右边值
var oBg=document.createElement("img");
oBg.src="http://fgm.cc/iphone/2.jpg";//预载第二张背景
var low=document.getElementById("loword");
var num=0;
TextCreat()//初始化函数
//拖动按钮
oBtn.οnmοusedοwn=function(e)
{
var e=e || window.event;//判断点击对象
disX=e.clientX - this.offsetLeft;//获取oBtn的初始位置值
document.οnmοusemοve=function(e)//开始滑动
{
var e=e || window.event;
var l=e.clientX -disX;//获取在滑动过程的left值;
l < 0 && (l=0);//如果l<0，l就等于0
l > maxL && (l= maxL);//同上一样是判断
oBtn.style.left=l+"px";
//如果oBtn位置在最右边，iphone就加载第二张图片，且locolk也隐藏
oBtn.offsetLeft == maxL && (iphone.style.background="url("+ oBg.src +")",locolk.style.display='none');
endSlide();
return false;
}
document.οnmοuseup=function()
{
document.οnmοusemοve=null;
document.onmoseup=null;
low.style.opacity=1;
oBtn.releaseCapture && oBtn.releaseCapture();//释放oBtn鼠标事件
oBtn.offsetLeft >= maxL ? startMove(maxL,function(){//当释放oBtn时，如果obtn.offsetLeft >=maxL就跳到第二张图片，并隐藏locolk否则obtn.offsetLeft就返回0
iphone.style.background="url("+ oBg.src +")",locolk.style.display='none';
}) : startMove(0)
// TextAnimate();
}
this.setCapture && this.setCapture();//添加oBtn.鼠标事件
return false;
}
function endSlide(){
var left = oBtn.style.left.substring(0, oBtn.style.left.length - 2);
var width = locolk.clientWidth - oBtn.clientWidth;
var opacity_k = (width - left*2.2) / (width);
low.style.opacity=opacity_k;
}
function startMove(iTaget,onEnd)
{
clearInterval(oBtn.times);
oBtn.times=setInterval(
function(){
doMove(iTaget,onEnd);
},
30
)
}
function doMove(iTaget,onEnd)
{
var iSpeed=(iTaget - oBtn.offsetLeft) / 5;
iSpeed=iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
//判断oBtn的位置，30毫秒就返回offsetLeft=0;
iTaget == oBtn.offsetLeft ? (clearInterval(oBtn.times),onEnd && onEnd()) : oBtn.style.left=iSpeed + oBtn.offsetLeft + "px";
}
function TextCreat()
{
var stxt=low.innerHTML;
var entext="";
for(var i=0;i<stxt.length;i++)
{
entext +="<a style='opacity:0.3'>" + stxt.charAt(i) +"</a>";
}
low.innerHTML=entext;
sp=document.getElementById("loword").childNodes;
for(var i=0;i<sp.length;i++)
{
sp[i].setAttribute("id","spans_"+i);
}
}
setInterval(function(){
}
num++;
var an=low.getElementsByTagName("a");
for(var i=0;i<an.length;i++)
{
an[i].style.opacity=0.3;
an[i].style.filter="alpha(opacity=30)";
}
num=0;
} },100)
}
</script>
</head>
<body>
<div id="iph">
<div id="lo"><span></span>
<div id="loword" style="opacity:1;">slide to unlock</div>
</div>
</div>
</body>
<html>
<head>
<meta charset="utf-8">
<title>Iphone解锁</title>
<style>
#iph{position:relative;width:426px;height:640px;margin:10px auto;background:url(http://fgm.cc/iphone/1.jpg) no-repeat;}
#lo{position:absolute;left:50%;bottom:33px;width:358px;height:62px;margin-left:-179px;}
#lo span{position:absolute;width:93px;height:62px;cursor:pointer;background:url(http://fgm.cc/iphone/btn.jpg) no-repeat;z-index:3;}
#loword{position:absolute;color:#FFF;transform:scaleX(0.99);left:110px;font:200 26px/63px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;}
.op{opacity:0.7;}
</style>
<script>
window.οnlοad=function(){
var iphone=document.getElementById("iph");
var locolk=document.getElementById("lo");
var oBtn=locolk.getElementsByTagName("span")[0];
var disX=0;
var maxL=locolk.clientWidth- oBtn.offsetWidth;//获取最大的left值，PS也就是obtn到了最右边值
var oBg=document.createElement("img");
oBg.src="http://fgm.cc/iphone/2.jpg";//预载第二张背景
var low=document.getElementById("loword");
var num=0;
TextCreat()//初始化函数
//拖动按钮
oBtn.οnmοusedοwn=function(e)
{
var e=e || window.event;//判断点击对象
disX=e.clientX - this.offsetLeft;//获取oBtn的初始位置值
document.οnmοusemοve=function(e)//开始滑动
{
var e=e || window.event;
var l=e.clientX -disX;//获取在滑动过程的left值;
l < 0 && (l=0);//如果l<0，l就等于0
l > maxL && (l= maxL);//同上一样是判断
oBtn.style.left=l+"px";
//如果oBtn位置在最右边，iphone就加载第二张图片，且locolk也隐藏
oBtn.offsetLeft == maxL && (iphone.style.background="url("+ oBg.src +")",locolk.style.display='none');
endSlide();
return false;
}
document.οnmοuseup=function()
{
document.οnmοusemοve=null;
document.onmoseup=null;
low.style.opacity=1;
oBtn.releaseCapture && oBtn.releaseCapture();//释放oBtn鼠标事件
oBtn.offsetLeft >= maxL ? startMove(maxL,function(){//当释放oBtn时，如果obtn.offsetLeft >=maxL就跳到第二张图片，并隐藏locolk否则obtn.offsetLeft就返回0
iphone.style.background="url("+ oBg.src +")",locolk.style.display='none';
}) : startMove(0)
// TextAnimate();
}
this.setCapture && this.setCapture();//添加oBtn.鼠标事件
return false;
}
function endSlide(){
var left = oBtn.style.left.substring(0, oBtn.style.left.length - 2);
var width = locolk.clientWidth - oBtn.clientWidth;
var opacity_k = (width - left*2.2) / (width);
low.style.opacity=opacity_k;
}
function startMove(iTaget,onEnd)
{
clearInterval(oBtn.times);
oBtn.times=setInterval(
function(){
doMove(iTaget,onEnd);
},
30
)
}
function doMove(iTaget,onEnd)
{
var iSpeed=(iTaget - oBtn.offsetLeft) / 5;
iSpeed=iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
//判断oBtn的位置，30毫秒就返回offsetLeft=0;
iTaget == oBtn.offsetLeft ? (clearInterval(oBtn.times),onEnd && onEnd()) : oBtn.style.left=iSpeed + oBtn.offsetLeft + "px";
}
function TextCreat()
{
var stxt=low.innerHTML;
var entext="";
for(var i=0;i<stxt.length;i++)
{
entext +="<a style='opacity:0.3'>" + stxt.charAt(i) +"</a>";
}
low.innerHTML=entext;
sp=document.getElementById("loword").childNodes;
for(var i=0;i<sp.length;i++)
{
sp[i].setAttribute("id","spans_"+i);
}
}
setInterval(function(){
for(var n=0;n<sp.length;n++)
{ sp[n].style.opactiy=0.3;
sp[num].style.opacity=0.8;}
num++;
if(num == sp.length){
var an=low.getElementsByTagName("a");
for(var i=0;i<an.length;i++)
{
an[i].style.opacity=0.3;
an[i].style.filter="alpha(opacity=30)";
}
num=0;
} },100)
}
</script>
</head>
<body>
<div id="iph">
<div id="lo"><span></span>
<div id="loword" style="opacity:1;">slide to unlock</div>
</div>
</div>
</body>
</html>
还有缺陷,字的循环（只有一遍）
3054
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
