<!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>WindowPhonw7</title>
<link href="base.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo">Windows Phone 7</div>
<div class="container">
<div class="search"><input type="text" /></div>
<div class="header">
<div id="time"></div>
</div>
<div class="conentGroup">
<div class="content">
<div class="bar">
<div class="back"><img src="images/arrow_right.png" /></div>
</div>
<div class="card"><img src="images/call.png" alt="Call" /></div>
<div class="card"><img src="images/message.png" alt="Messages" /></div>
<div class="card"><img src="images/IE.png" alt="Internet" /></div>
<div class="card"><img src="images/facebook.png" alt="Facebook" /></div>
<div class="card long"><img src="images/Your pictures and videos.jpg" alt="Videos"/></div>
<div class="card"><img src="images/twitter.png" alt="Twitter" /></div>
<div class="card"><img src="images/mail.png" alt="Mail" /></div>
<div class="clear"></div>
</div>
<div class="content2 skew">
<span></span>
</div>
</div>
<div class="control">
<img class="button left" src="images/arrow_left.png" />
<img class="button middle" src="images/MS WINDOWS 7.png" />
<img class="button right" src="images/zoom.png" />
</div>
</div>
</body>
</html>
<script src="jquery-1.6.1.min.js"></script>
<script>
$(function(){
var card = $(".card");
//Card——————————————————————————————————————————
$(".card").click(function(){
$(".search").hide();
$(this).fadeTo(1300,0);
$(".content").fadeOut(900,skew);
function skew(){
$(".content2").removeClass("skew");
}
var list = $(this).siblings(".card");
var i = 0;
(function cover() {
list.eq(i++).addClass("cover").fadeTo(90,0,cover);
})();
var title = $(this).find("img").attr("alt");
$(".content2 span").html(title).fadeTo(900,1);
})
//Back——————————————————————————————————————————
$(".middle").click(function(){
$(".search").hide();
$(".content2").addClass("skew");
$(".content").fadeIn(900);
var j = 0;
(function cover2() {
card.eq(j++).removeClass("cover").fadeTo(90,1,cover2);
})();
$(".content2 span").fadeTo(100,0);
})
//MultiTasking——————————————————————————————————————————
$(".right").click(function(){
$(".search").slideToggle(300);
})
$(".left").click(function(){
$(".search").hide();
$(".content").fadeOut(900,skew);
function skew(){
$(".content2").removeClass("skew");
}
var list = $(".card");
var i = 0;
(function cover() {
list.eq(i++).addClass("cover").fadeTo(90,0,cover);
})();
var text = "multiTasking";
$(".content2 span").html(text).fadeTo(900,1);
})
})
startTime();
//时钟——————————————————————————————————————————
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById("time").innerHTML=h+":"+m
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
CSS3+jQuery模拟Windows Phone7 UI.zip （17个子文件） 
CSS3+jQuery模拟Windows Phone7 UI jQueryWP7UI 
jquery-1.6.1.min.js 89KB images 
MS WINDOWS 7.png 4KB
Your pictures and videos.jpg 33KB call.png 5KB twitter.png 951B facebook.png 573B close.png 806B message.png 5KB Phones.png 214KB zoom.png 6KB arrow_left.png 6KB blank.png 4KB mail.png 1KB IE.png 6KB arrow_right.png 6KB
index.html 4KB base.css 3KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
最新资源
- 修改LATEX.pdf
- IMG_20241125_120800.jpg
- AI助手Copilot辅助Go+Flutter打造全栈式在线教育系统课程17章
- 2024下半年，CISSP官方10道练习题
- JD-Core是一个用JAVA编写的JAVA反编译器 .zip
- 时间复杂度与数据结构：算法效率的双重奏
- QT 简易项目 网络调试器(未实现连接唯一性) QT5.12.3环境 C++实现
- YOLOv3网络架构深度解析：关键特性与代码实现
- ACOUSTICECHO CANCELLATION WITH THE DUAL-SIGNAL TRANSFORMATION LSTM NETWORK
- 深入解析：动态数据结构与静态数据结构的差异
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
