仿iPhone开关式按钮(jQuery+CSS3)
001 |
<!DOCTYPE html> |
002 |
< html >
|
003 |
< head >
|
004 |
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
|
005 |
< meta name = "author" content = "pandao QQ:272383090" />
|
006 |
< title >仿iPhone开关式按钮(jQuery+CSS3)</ title >
|
007 |
< style type = "text/css" >
|
008 |
*{margin:0;padding:0;} |
009 |
body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;padding:50px;} |
010 |
a{color:#444;text-decoration: none;} |
011 |
a:hover{color:#065BC2;text-decoration: none;} |
012 |
.clear{clear:both;} |
013 |
img{border:none;vertical-align: middle;} |
014 |
ul{list-style: none;} |
015 |
.mwui-switch-btn{ |
016 |
width:84px;
|
017 |
display:block;
|
018 |
padding:1px;
|
019 |
background:#3B75FD;
|
020 |
overflow:hidden;
|
021 |
margin-bottom:5px;
|
022 |
border:1px solid #2E58C1;
|
023 |
border-radius:18px;
|
024 |
cursor: pointer;
|
025 |
} |
026 |
.mwui-switch-btn span{ |
027 |
width:32px;
|
028 |
font-size:14px;
|
029 |
height:18px;
|
030 |
padding:4px 5px 2px 5px;
|
031 |
display:block;
|
032 |
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f6f6f6,endColorstr=#eeeeee,grandientType=1);
|
033 |
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f6f6f6), to(#eeeeee));
|
034 |
background:-moz-linear-gradient(top, #f6f6f6, #eeeeee);
|
035 |
border-radius:18px;
|
036 |
float:left;
|
037 |
color:#3B75FD;
|
038 |
text-align:center;
|
039 |
} |
040 |
.mwui-switch-btn:hover span{ |
041 |
background:#fff;
|
042 |
} |
043 |
.mwui-switch-btn span.off{float:right;} |
044 |
input[type='submit']{padding:5px 10px;cursor: pointer;} |
045 |
</ style >
|
046 |
</ head >
|
047 |
< body >
|
048 |
< form method = "post" >
|
049 |
显示图标1:< button class = "mwui-switch-btn" >< span change = "开" class = "off" >关</ span >< input type = "hidden" name = "show_icon" value = "0" /></ button >
|
050 |
显示顶栏1:< button class = "mwui-switch-btn" >< span change = "关" >开</ span >< input type = "hidden" name = "open_topbar" value = "1" /></ button >
|
051 |
< br />
|
052 |
显示图标2:< button class = "mwui-switch-btn" >< span change = "OFF" >ON</ span >< input type = "hidden" name = "show_icon2" value = "1" /></ button >
|
053 |
显示顶栏2:< button class = "mwui-switch-btn" >< span change = "ON" class = "off" >OFF</ span >< input type = "hidden" name = "open_topbar2" value = "0" /></ button >
|
054 |
< br />
|
055 |
< input type = "submit" id = "submit" value = "提交" />
|
056 |
</ form >
|
057 |
< div id = "debuger" ></ div >
|
058 |
< script type = "text/javascript" src = "http://code.jquery.com/jquery-1.6.4.min.js" ></ script >
|
059 |
< script type = "text/javascript" >
|
060 |
$(function() {
|
061 |
$('.mwui-switch-btn').each(function() {
|
062 |
$(this).bind("click", function() {
|
063 |
var btn = $(this).find("span");
|
064 |
var change = btn.attr("change");
|
065 |
btn.toggleClass('off');
|
066 |
067 |
if(btn.attr("class") == 'off') {
|
068 |
$(this).find("input").val("0");
|
069 |
btn.attr("change", btn.html());
|
070 |
btn.html(change);
|
071 |
} else {
|
072 |
$(this).find("input").val("1");
|
073 |
btn.attr("change", btn.html());
|
074 |
btn.html(change);
|
075 |
}
|
076 |
077 |
return false;
|
078 |
});
|
079 |
});
|
080 |
081 |
$("#submit").click(function() {
|
082 |
var form = $(this).parent()[0];
|
083 |
var inputs = form.getElementsByTagName('input');
|
084 |
var params = [];
|
085 |
$('#debuger').html('');
|
086 |
087 |
for (var i=0; i < inputs.length ; i++) {
|
088 |
params.push(inputs[i].name+"="+inputs[i].value);
|
089 |
}
|
090 |
091 |
$.post("post.php", params.join("&")+"&temp="+Math.random(), function(data) {
|
092 |
$('#debuger').html(data);
|
093 |
});
|
094 |
095 |
return false;
|
096 |
});
|
097 |
});
|
098 |
</script> |
099 |
</ body >
|
100 |
</ html >
|
相关推荐
jQuery+CSS3仿iPhone4S Siri UI.zip
jQuery+CSS仿iPhone手机面板导航
一款基于jQuery+CSS3实现的仿苹果手机iPhone锁屏解锁代码,非常逼真的苹果手机模型,控制鼠标滑动来实现手机解锁进入主界面,还带有动画特效。
一款很不错的,使用jQuery+css3实现的特殊效果,可以模仿相机快门闪动的效果,特别类似iPhone手机上的相机快门圈效果。 因此内容作为欣赏的较多,故使用方法这里不再赘述。
jQuery+CSS3实现iPhone手机锁屏解锁动画特效源码.zip
html5, css3, html5 教程,css, jquery, javascript, div+css模板, css模板, css教程, div css, css hack, JS, html5 开发工具
有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!
10.jquery仿卓越亚马逊网鼠标移到按钮弹出菜单的效果代码 11.jquery浮动变化的个性菜单插件floatmenu下载 12.jQuery黑色风格仿Flash版下滑菜单效果 13.jquery黑色循环滚动菜单特效插件下载 14.jquery灰色...
jQuery CSS仿iPhone手机滑动解锁屏幕
jQuery CSS3仿iPhone4S Siri UI
有兴趣刚需的可以自己下载,非常实用的特效代码,可以完美运行,有能力的还可以二次修改!
自己在网上找的安卓的css3开关按钮,稍作了修改,成了iphone的开关按钮,分享给大家方便大家用得上。
css3 iphone开关按钮是一款纯css3实现的iphone UI滑动开关按钮。 css3 iphone开关按钮演示图:
jQuery+HTML5仿iPhoneQQ首页效果.zip
android开发仿iphone开关按钮
javascript+css,仿iphone的精美计时器
利用checkbox结合CSS3来实现一个3D开关切换按钮,该CSS3按钮一共有4款不同的样式风格,有电器开关样式按钮、iPhone锁屏样式按钮等。该CSS3按钮的实现原理很简单,原型是一个checkbox,然后利用CSS3属性来渲染...
一款简单的js+css3仿iphone手机滑动解锁文字扫光滑过动画特效,文字高光扫过动画效果。
支持android,iphone,手机图片自动滑动效果,html5+css3+jquery+swipe