jQuery实现的iPhone解锁界面特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery实现的iPhone解锁界面特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!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" />
<meta name="keywords" content="JS代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jQuery" />
<title>jQuery</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/ui.core-1.5.3.js"></script>
<script type="text/javascript" src="js/ui.slider.js"></script>
<script type="text/javascript" src="js/iphone-unlock.js"></script>
</head>
<body>
<div id="iphone-scrollcontainer">
	<div id="iphone-inside">
        <div id="unlock-top">
            <p id="timepicker" class="time">08:23</p>
            <p id="datepicker" class="date">Wednesday, July 6</p>
        </div>
        <div id="unlock-spacer">
        	&nbsp;
        </div>
        <div id="unlock-bottom">
        	<div id="slide-to-unlock"></div>
        	<div id="unlock-slider-wrapper">
        		<div id="unlock-slider"><div id="unlock-handle"></div></div>
        	</div>
        </div>
    </div>
</div>
</body>
</html>

JS代码(iphone-springboard.js):

/** Author:Marco Kuiper (http://www.marcofolio.net/)* BelongsTo:The iPhone springboard in xHTML,CSS and jQuery*/
$(document).ready(function(){
	// Fade in the docking bar$("#springboard-bar").fadeIn(1500);
	// Fade and Slide in the elements$("#springboard-items").fadeIn(1000);
	// Doesn't work in IE?$(".downright").animate({
	left:0,top:0}
,600);
	$(".downleft").animate({
	left:0,top:0}
,600);
	$(".upright").animate({
	left:0,top:0}
,600);
	$(".upleft").animate({
	left:0,top:0}
,600);
	// What will happen when an icon gets clicked$(".ico_btn").click(function(event){
	var element = $(this);
	event.preventDefault();
	$("#springboard-bar").fadeOut("slow");
	$("#springboard-items").fadeOut("slow",function(){
	window.location = element.attr("href");
}
);
}
);
}
);

JS代码(iphone-unlock.js):

/** Author:Marco Kuiper (http://www.marcofolio.net/)* BelongsTo:The iPhone unlock screen in xHTML,CSS and jQuery* Modifications:Swing back and "slide to unlock"-fade made by Martin Jansson (http://www.martinjansson.se)*/
$(document).ready(function(){
	// Set the slider to be sliding$("#unlock-slider").slider({
	handle:"#unlock-handle",animate:true,slide:function(e,ui){
	$("#slide-to-unlock").css("opacity",1-(parseInt($("#unlock-handle").css("left"))/120));
}
,stop:function(e,ui){
	if($("#unlock-handle").position().left == 205){
	unlock();
}
else{
	$("#unlock-handle").animate({
	left:0}
,200 );
	$("#slide-to-unlock").animate({
	opacity:1}
,200 );
}
}
}
);
	var unlock = function(){
	//$("#iphone-inside").animate({
	backgroundPosition:'0 40'}
,400,'',function()//{
	$("#unlock-bottom").animate({
	bottom:-100}
,300);
	$("#unlock-top").animate({
	top:-100}
,300,'',function(){
}
);
	$("#iphone-inside").fadeOut("normal",function(){
	window.location="iphone.html";
}
);
	//}
);
}
// Set the date and timevar d_names = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
	var m_names = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
	var d = new Date();
	var curr_day = d.getDay();
	var curr_date = d.getDate();
	var curr_month = d.getMonth();
	var curr_year = d.getFullYear();
	var curr_hour = d.getHours();
	var curr_min = d.getMinutes();
	$("#datepicker").replaceWith("<p class=\"date\">" + d_names[curr_day] + "," + m_names[curr_month] + " " + curr_date + "</p>");
	// Adding a "0" when hours / minutes is only one characterif(curr_hour < 10){
	curr_hour = "0" + curr_hour;
}
if(curr_min < 10){
	curr_min = "0" + curr_min;
}
$("#timepicker").replaceWith("<p class=\"time\">" + curr_hour + ":" + curr_min + "</p>");
}
);

CSS代码(index.css):

body{background-image:url(../images/iphone-bg.png);background-repeat:no-repeat;background-color:#25262b;padding:0;margin:0;}
a{outline:none;}
p{padding:0;margin:0;}
img{border:0;}
#iphone-scrollcontainer{height:461px;width:320px;position:absolute;top:140px;left:40px;background-color:#000000;}
#iphone-inside{overflow:hidden;height:100%;width:100%;background-image:url(../images/lanrentuku.png);}
#unlock-top{position:relative;height:95px;background-image:url(../images/lock-top.png);}
#unlock-spacer{height:272px;/* Total height = 461px - 95px (top) - 94px (bottom) */
}
#unlock-bottom{position:relative;height:94px;background-image:url(../images/lock-bottom.png);}
#slide-to-unlock{position:absolute;z-index:1;top:0;left:0;width:100%;height:94px;background-image:url(../images/slide-to-unlock.gif);}
#unlock-slider-wrapper{padding-left:22px;padding-top:23px;}
#unlock-slider{width:277px;height:50px;}
#unlock-handle{position:absolute;z-index:10;height:50px;width:72px;top:0px;left:0px;background-image:url(../images/lock-slider.png);}
.time{text-align:center;color:#FFFFFF;font-family:Georgia,Times,serif;font-size:45px;padding:6px 0;}
.date{text-align:center;color:#FFFFFF;font-family:Georgia,Times,serif;font-size:12px;}
/* Used by the jQuery slider */
.ui-slider{position:relative;background-repeat:no-repeat;background-position:center center;}
/* �Ѽ����� www.lanrentuku.com */

CSS代码(iphone.css):

/* __ _ _ _ / _| | (_) | | _ __ ___ __ _ _ __ ___ ___ | |_ ___ | |_ ___ _ __ ___| |_| '_ ` _ \ / _` | '__/ __/ _ \| _/ _ \| | |/ _ \ | '_ \ / _ \ __|| | | | | | (_| | | | (_| (_) | || (_) | | | (_) || | | | __/ |_|_| |_| |_|\__,_|_| \___\___/|_| \___/|_|_|\___(_)_| |_|\___|\__|www.lanrentuku.com*/
body{background-image:url(../images/iphone-bg.png);background-repeat:no-repeat;background-color:#25262b;padding:0;margin:0;}
a{outline:none;}
p{padding:0;margin:0;}
img{border:0;}
#iphone-scrollcontainer{height:461px;width:320px;position:absolute;top:140px;left:40px;background-color:#000000;overflow:hidden;}
.row{clear:both;}
.icon{float:left;margin:9px 11px;}
.ico_txt{text-align:center;font-family:Georgia,Times,serif;font-size:10px;color:#d4d4d5;}
#springboard-bar{position:absolute;top:368px;background-image:url(../images/springboard-bar-bg.png);background-repeat:repeat-x;width:100%;height:92px;display:none;/* Will be displayed with jQuery */
}
#springboard-bar div.icon{margin-top:13px;}
#springboard-bar div.icon p.ico_txt{margin-top:8px;}
#springboard-items{width:100%;height:368px;display:none;}
.upleft{position:relative;left:-160px;top:-160px;}
.upright{position:relative;left:160px;top:-160px;}
.downleft{position:relative;left:-160px;top:160px;}
.downright{position:relative;left:160px;top:160px;}

附件:下载该文件资源,减少时间成本(增值服务)