以下是 jQuery+CSS3仿IOS无线局域网Wifi 的示例演示效果:
部分效果截图:
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" />
<title>Wifi</title>
<link href="base.css" type="text/css" rel="stylesheet">
<script src="js/jquery-1.7.min.js"></script>
<script src="js/common.js"></script>
</head>
<body>
<div class="container">
<div class="outline">
<span>无线局域网</span><div class="button"></div>
<div class="clear"></div>
</div>
<div class="load"><span>选取网络...</span><img src="images/loading.gif" /></div>
<div class="list">
<ul>
<li><span>wifi-1</span><div class="line"></div>
<img src="images/1.png" class="direct" />
<div class="signal"></div>
</li>
<li><span>wifi-2</span><div class="line"></div>
<img src="images/1.png" class="direct" />
<div class="signal"></div>
</li>
<li><span>wifi-3</span>
<img src="images/1.png" class="direct" />
<div class="signal"></div>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="mask"></div>
<div class="floatBox">
<div class="Info">无法连接网络</div>
<div class="BtnSet">
<input type="button" class="cancel"/></button>
<input type="button" class="ok"/></button>
</div>
</div>
</body>
</html>
JS代码(common.js):
// JavaScript Document$(function(){
var i = 0;
var process1 = false;
var process2 = false;
$(".list li").last().css({
"border-bottom-left-radius":"20px","border-bottom-right-radius":"20px"}
);
$(".list li").first().css({
"border-top-left-radius":"20px","border-top-right-radius":"20px"}
);
if($.browser.msie&&($.browser.version < "9.0")){
$(".button").addClass("buttonIE");
}
$(".button").click(function(){
if(process1){
}
else{
process1 = true;
$(this).toggleClass("hover");
if(i==0){
$(".load").fadeTo(400,1,slideDown);
}
else{
$(".load").fadeTo(100,0,slideUp);
}
}
function slideDown(){
$(".list").slideToggle(100);
$(".load img").hide();
i = 1;
process1 = false;
}
function slideUp(){
$(".list").slideToggle(100);
$(".load img").show();
i = 0;
process1 = false;
}
$(".list li").hover(function(){
$(this).find(".signal").addClass("hover");
}
,function(){
$(this).find(".signal").removeClass("hover");
}
) $(".floatBox").center();
$(".list li").click(function(){
if($.browser.msie&&($.browser.version < "9.0")){
}
else if(process2){
}
else{
process2 = true;
$(".mask").show();
$(".floatBox").fadeTo(300,1);
}
}
);
$(".ok,.cancel").click(function(){
$(".mask").hide();
$(".floatBox").hide(0,finish);
}
);
function finish(){
process2 = false;
}
}
) jQuery.fn.center = function (){
this.css('position','absolute');
this.css('top',( $(window).height() - this.height() ) /2 +$(window).scrollTop() + 'px');
this.css('left',( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');
return this;
}
}
)
CSS代码(base.css):
@charset "utf-8";/* CSS Document */
*{margin:0;padding:0;}
body{background:url(images/bg.PNG);margin:0;padding:0;}
.clear{clear:both;}
.container{margin:0 auto;width:950px;height:500px;-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-ms-transform:scale(0.8);-o-transform:scale(0.8);}
.outline,.list{width:700px;margin:50px auto;height:auto;border:2px solid #A1A7AE;background:#FFF;padding:5px 10px;border-radius:20px;}
.outline span{float:left;margin:0 20px;font:38px "黑体";font-weight:600;height:90px;line-height:90px;letter-spacing:2px;}
.button{float:right;background:url(images/button.png);background-position:-102px 0;width:156px;height:56px;margin:15px 5px;cursor:pointer;-webkit-transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;border-radius:32px;}
.button.hover{background-position:0 0;}
.buttonIE{float:right;background:url(images/msie.png);background-position:-156px 0;width:156px;height:56px;margin:15px 5px;cursor:pointer;}
.load{width:700px;height:30px;margin:0 auto;display:none;}
.load span{float:left;margin:0 20px;font:32px "微软雅黑";line-height:30px;letter-spacing:2px;color:#4C566C;text-shadow:0 2px #E7EAED;}
.load img{float:left;margin:0 10px;}
.list{margin:20px auto;height:258px;/****IE Suppert****/
display:none;}
.list span{float:left;margin:0 50px;font:bold 32px "微软雅黑";line-height:90px;letter-spacing:2px;}
.list ul{list-style:none;margin:0 auto;width:720px;margin:-6px 0;}
.list li{position:relative;left:-10px;width:720px;height:90px;cursor:pointer;}
li:hover{background:#007FEA;/* default background for browsers without gradient support */
color:#FFF;/* css3 */
background:-webkit-gradient(linear,0 0,0 100%,from(#007FEA),to(#4DA5F0));background:-moz-linear-gradient(#007FEA,#4DA5F0);background:-o-linear-gradient(#007FEA,#4DA5F0);background:linear-gradient(#007FEA,#4DA5F0);text-shadow:0 0 90px #fff,0 0 40px #fff,0 0 10px #fff;}
.line{position:relative;top:90px;width:720px;height:2px;background:#A1A7AE;}
.direct{display:block;float:right;margin:20px;border-radius:30px;}
.signal{background:url(images/signal.png);display:block;float:right;margin:22px 0px;width:40px;height:40px;}
.signal.hover{background:url(images/signal2.png);}
.mask{width:100%;height:100%;position:fixed;display:none;background:#000;background:-webkit-radial-gradient(center,rgba(0,0,0,0.3),rgba(0,0,0,1) 80%);background:-moz-radial-gradient(center,rgba(0,0,0,0.3),rgba(0,0,0,1) 80%);background:radial-gradient(center,rgba(0,0,0,0.3),rgba(0,0,0,1) 80%);opacity:0.6;filter:alpha(opacity=60);-webkit-transition:0.2s ease-in-out;-moz-transition:0.2s ease-in-out;top:0;left:0;}
/*****************dialogue******************/
.floatBox{background:url(images/dialogue.png);width:286px;height:138px;display:none;position:absolute;z-index:1;-webkit-transform:scale(1.3);-moz-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);}
.Info{width:95%;height:70px;margin:5px auto 0;font:18px "微软雅黑";color:#FFF;text-align:center;letter-spacing:2px;line-height:70px;}
.BtnSet{width:98%;height:50px;margin:0px auto;}
input[type="button"],input[type="submit"],input[type="reset"]{background-color:transparent;padding:0;border:0;cursor:pointer;}
.ok,.cancel{float:left;width:128px;height:43px;border:none;color:#FFF;margin:5px;}
.ok{background-image:url(images/ok.png);}
.cancel{background-image:url(images/cancel.png);}
.ok:active{background-image:url(images/ok1.png);}
.cancel:active{background-image:url(images/cancel1.png);}