仿照iPhone开关样式



<!DOCTYPE html>

<html>
<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title>
<style type="text/css">


.mwui-switch-btn:hover span{background:#ffffff;}
.mwui-switch-btn{  display:block; padding:1px;  overflow:hidden; margin-bottom:5px; border-radius:18px; cursor: pointer;}
.btn_on{width:51px;height:28px;background:#00b9ff;}
.btn_off{width:51px;height:26px;background:#ffffff; border:1px solid #e2e2e2}


.btn_span{display: block;background: -moz-linear-gradient(top, #ffffff, #eeeeee); border-radius: 18px;color: #3B75FD;text-align: center;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f6f6f6,endColorstr=#eeeeee,grandientType=1);background: -webkit-gradient(linear, 0 0, 0 100%, from(#f6f6f6), to(#eeeeee));} 
.btn_span_on{width: 28px;height: 28px;float:right;box-shadow: 0 1px 2px 1px  #4a90c3;}
.btn_span_off{  width: 28px;height: 26px;float: left;box-shadow: 0 1px 1px 1px  #e2e2e2;}


</style>
</head>
<body>
<div class="mwui-switch-btn btn_off" ><span  class="btn_span btn_span_off"></span><input type="hidden" name="open_topbar"   /></div> 
<div class="mwui-switch-btn btn_on"  ><span  class="btn_span btn_span_on"></span><input type="hidden" name="show_icon"  /></div> 


<br />




<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function() { 
$('.mwui-switch-btn').each(function() {
$(this).bind("click", function() { 
var btn = $(this).find("span");
var outer_btn = $(this);
if(btn.hasClass('btn_span_on')){
btn.removeClass('btn_span_on'); 
btn.addClass('btn_span_off'); 

outer_btn.removeClass('btn_on'); 
outer_btn.addClass('btn_off'); 
}else{
btn.removeClass('btn_span_off'); 
btn.addClass('btn_span_on'); 

outer_btn.removeClass('btn_off'); 
outer_btn.addClass('btn_on'); 
}

return false;
});
});


});
</script>
<!--powered By 管融嘉 @ 20180131-->
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值