jQuery+CSS3仿IOS无线局域网Wifi

版权:原创 更新时间:1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+CSS3仿IOS无线局域网Wifi 的示例演示效果:

当前平台(PC电脑)
  • 平台:

部分效果截图:

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);}
附件:下载该文件资源,减少时间成本(增值服务)
留言
该资源可下载
File Source
.rar
147.59 KB
Html CSS3特效
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害,或使用了您的版权,请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
联系我们
  • QQ:21499807
  • 邮箱:sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章