jQuery开关切换效果代码
1、新建html文档。
2、书写hmtl代码。
<div class="page">
<h2>设置</h2>
<div class="common-row">
<div class="cell-left">飞行模式</div>
<div class="cell-right"><span class="switch-on" themeColor="gold" id="fly"></span></div>
</div>
<div class="common-row hidden" id="network">
<div class="cell-left">蜂窝移动网络</div>
<div class="cell-right">></div>
</div>
<div class="common-row">
<div class="cell-left">无线局域网</div>
<div class="cell-right"><span class="switch-on" id="wifi"></span></div>
</div>
<div class="common-row">
<div class="cell-left">蓝牙</div>
<div class="cell-right"><span class="switch-off" id="bluetooth"></span></div>
</div>
<div class="common-row">
<div class="cell-left">热点（禁用）</div>
<div class="cell-right"><span class="switch-on switch-disabled" id="hotspot"></span></div>
</div>
<div class="common-row">
<div class="cell-left">位置（禁用）</div>
<div class="cell-right"><span class="switch-off switch-disabled" id="position"></span></div>
</div>
<div class="common-row">
<div class="cell-left">查看使用说明</div>
<div class="cell-right"><span class="switch-on" themeColor="#6d9eeb" id="directory"></span></div>
</div>
</div>
3、书写css代码必要样式。
[class|=switch] {
position: relative;
display: inline-block;
width: 50px;
height: 30px;
border-radius: 16px;
line-height: 32px;
-webkit-tap-highlight-color:rgba(255,255,255,0);
}
.switch-on { border: 1px solid white; box-shadow: white 0px 0px 0px 16px inset; transition: border 0.4s, box-shadow 0.2s, background-color 1.2s; background-color: white; cursor: pointer; }
.slider { position: absolute; display: inline-block; width: 30px; height: 30px; background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); border-radius: 50%; left: 0; top: 0; }
.switch-on .slider { left: 20px; transition: background-color 0.4s, left 0.2s; }
.switch-off { border: 1px solid #dfdfdf; transition: border 0.4s, box-shadow 0.4s; background-color: rgb(255, 255, 255); box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset; background-color: rgb(255, 255, 255); cursor: pointer; }
.switch-off .slider { left: 0; transition: background-color 0.4s, left 0.2s; }
.switch-on.switch-disabled { opacity: .5; cursor: auto; }
.switch-off.switch-disabled { background-color: #F0F0F0 !important; cursor: auto; }
4、书写css代码。
<style>
html { margin: 0; padding: 0; background: #d9d9d9; }
body { margin: 0; padding: 0; word-break: break-all; word-wrap: break-word; overflow-x: hidden; }
.page { width: 800px; margin: 0 auto; padding: 15px; background: white; }
h1, h2 { margin: 0; text-align: center; margin-bottom: 15px; }
.common-row { width: 100%; height: 50px; border-bottom: 1px solid lightgrey; }
.cell-left, .cell-right { width: 49%; height: 100%; float: left; line-height: 50px; }
.cell-right { text-align: right; }
.switch-on, .switch-off { margin-top: 9px; }
.showBox { width: 100%; border: 1px solid lightgrey; border-radius: 6px; font-size: 16px; background: #CCFF99; }
.paragraph { white-space: pre-wrap; margin: 15px 0; word-break: break-all; word-wrap: break-word; }
textarea { width: 80%; border: none; outline: none; resize: none; font-size: 16px; height: auto; overflow: visible; }
.hidden { display: none; }
@media screen and (max-width: 800px) {
.page { width: 100%; box-sizing: border-box; }
}
</style>
5、书写并添加js代码。
<script src="lib/jquery.js"></script>
<script>
var honeySwitch = {};
honeySwitch.themeColor = "rgb(100, 189, 99)";
honeySwitch.init = function() {
var s = "<span class='slider'></span>";
$("[class^=switch]").append(s);
$("[class^=switch]").click(function() {
if ($(this).hasClass("switch-disabled")) {
return;
}
if ($(this).hasClass("switch-on")) {
$(this).removeClass("switch-on").addClass("switch-off");
$(".switch-off").css({
'border-color' : '#dfdfdf',
'box-shadow' : 'rgb(223, 223, 223) 0px 0px 0px 0px inset',
'background-color' : 'rgb(255, 255, 255)'
});
} else {
$(this).removeClass("switch-off").addClass("switch-on");
if (honeySwitch.themeColor) {
var c = honeySwitch.themeColor;
$(this).css({
'border-color' : c,
'box-shadow' : c + ' 0px 0px 0px 16px inset',
'background-color' : c
});
}
if ($(this).attr('themeColor')) {
var c2 = $(this).attr('themeColor');
$(this).css({
'border-color' : c2,
'box-shadow' : c2 + ' 0px 0px 0px 16px inset',
'background-color' : c2
});
}
}
});
window.switchEvent = function(ele, on, off) {
$(ele).click(function() {
if ($(this).hasClass("switch-disabled")) {
return;
}
if ($(this).hasClass('switch-on')) {
if ( typeof on == 'function') {
on();
}
} else {
if ( typeof off == 'function') {
off();
}
}
});
}
if (this.themeColor) {
var c = this.themeColor;
$(".switch-on").css({
'border-color' : c,
'box-shadow' : c + ' 0px 0px 0px 16px inset',
'background-color' : c
});
$(".switch-off").css({
'border-color' : '#dfdfdf',
'box-shadow' : 'rgb(223, 223, 223) 0px 0px 0px 0px inset',
'background-color' : 'rgb(255, 255, 255)'
});
}
if ($('[themeColor]').length > 0) {
$('[themeColor]').each(function() {
var c = $(this).attr('themeColor') || honeySwitch.themeColor;
if ($(this).hasClass("switch-on")) {
$(this).css({
'border-color' : c,
'box-shadow' : c + ' 0px 0px 0px 16px inset',
'background-color' : c
});
} else {
$(".switch-off").css({
'border-color' : '#dfdfdf',
'box-shadow' : 'rgb(223, 223, 223) 0px 0px 0px 0px inset',
'background-color' : 'rgb(255, 255, 255)'
});
}
});
}
};
honeySwitch.showOn = function(ele) {
$(ele).removeClass("switch-off").addClass("switch-on");
if(honeySwitch.themeColor){
var c = honeySwitch.themeColor;
$(ele).css({
'border-color' : c,
'box-shadow' : c + ' 0px 0px 0px 16px inset',
'background-color' : c
});
}
if ($(ele).attr('themeColor')) {
var c2 = $(ele).attr('themeColor');
$(ele).css({
'border-color' : c2,
'box-shadow' : c2 + ' 0px 0px 0px 16px inset',
'background-color' : c2
});
}
}
honeySwitch.showOff = function(ele) {
$(ele).removeClass("switch-on").addClass("switch-off");
$(".switch-off").css({
'border-color' : '#dfdfdf',
'box-shadow' : 'rgb(223, 223, 223) 0px 0px 0px 0px inset',
'background-color' : 'rgb(255, 255, 255)'
});
}
$(function() {
honeySwitch.init();
});
</script>
6、书写并添加js代码。
<script>
//honeySwitch.themeColor="lightblue";
$(function(){
switchEvent("#fly",function(){
$("#network").slideUp();
},function(){
$("#network").slideDown();
});
switchEvent("#directory",function(){
$("#directory_content").fadeIn();
},function(){
$("#directory_content").fadeOut();
});
});
</script>
7、代码整体结构。
8、查看效果。
