作者：小5聊基础
简介：一只喜欢全栈方向的程序员，欢迎咨询，尽绵薄之力答疑解惑
编程原则：Write Less Do More
【滑动切换组件特点】
1）默认为未启用状态，值为0
2）由底部具有一定高宽度的滑动背景层，默认为灰色状态
3）灰色背景层上有一个滑动小圆圈，默认在左边停靠
4）当切换到开状态时，滑动背景轨道变为蓝色等高亮状态颜色
5）当切换到开状态时，滑动小圆圈从左边滑动到右边
6）当切换到开状态时，值由0变为1，可以设置保存到一个input隐藏域里
【滑动切花组件布局】
1）先设置一个父级div，宽度定为60px，高度和行高定为24px，背景为灰色，并且为鼠标点击状态cursor:pointer，边框设置为圆形边框，border-radius:24px;
<div style="cursor:pointer;width: 60px;height: 24px;line-height: 24px;background: #e3e3e3;position:relative;border-radius:24px;">
</div>2）再父级div基础上，添加一个小圆圈div，高宽度为18px，和父级div有6px的差值，相对父级定位，top值即可设置为3px，位于垂直居中状态
<style type="text/css">
.switch-div {
cursor: pointer;
width: 60px;
height: 24px;
line-height: 24px;
background: #e3e3e3;
position: relative;
border-radius: 24px;
overflow: hidden;
}
.switch-div .icon-div {
width: 18px;
height: 18px;
border-radius: 18px;
background: #fff;
position: absolute;
top: 3px;
left: 3px;
}
</style>
<div style="width:300px;height:500px;background:#fff;padding:10px;margin:0 auto;margin-top:30px;border-radius:10px;box-shadow:0 0 13px #ccc;">
<div class="switch-div" style="">
<div class="icon-div"></div>
</div>
</div>3）在上面两步操作，已经出来原型了，接下来就是显示开和关文本值，设置一个span标签显示文本
【滑动切换组件动起来】
- 方法一 - 使用animate动画方法实现
1）先给切换组件绑定一个点击事件
2）在点击方法里，获取组件宽度，因为有3px距离空隙值，所以滑动宽度需要减去3px，并且还要减去小圆圈的宽度
3）设置小圆圈使用animate动画，left从3px滑动到右边，在滑动的同时也需要高亮背景
4）同时文本值显示在左边
5）设置一个属性data-flag，保存当前开和关状态，1=表示开，0=表示关
- 方法二 - 在方法一逻辑基础上，改为transition样式方式
1）设置一个焦点class，所有开状态的样式值设置到class里
2）当开状态时，添加class焦点值
3）当关状态时，去掉class焦点值
【主要知识点列表】
| 编号 | 语言或插件 | 知识点 | 说明 |
|---|---|---|---|
| 1 | jQUery | $(dom).animate() | 动画方法，元素样式从一个状态到另一个状态的变化 |
| 2 | css | transition | 过渡、渐变属性，transition:all .5s all表示所有属性，也可以设置单个或者多个，多个用逗号隔开 |
【完整代码】
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>switch切换组件</title>
<style>
body, html {
margin: 0;
padding: 0;
font-size: 100%;
}
</style>
</head>
<body>
<style type="text/css">
.switch-div {
cursor: pointer;
width: 60px;
height: 24px;
line-height: 24px;
background: #e3e3e3;
position: relative;
border-radius: 24px;
overflow: hidden;
text-align: right;
color: #333;
font-size: 13px;
}
.switch-div .span {
margin-right: 8px;
}
.switch-div .icon-div {
width: 18px;
height: 18px;
border-radius: 18px;
background: #fff;
position: absolute;
top: 3px;
left: 3px;
transition: left .3s;
-moz-transition: left .3s; /* Firefox 4 */
-webkit-transition: left .3s; /* Safari 和 Chrome */
-o-transition: left .3s; /* Opera */
}
.switch-div-action {
background: #099dff;
color: #fff;
text-align: left;
}
.switch-div-action .icon-div {
left: 39px;
}
.switch-div-action .span {
margin-left: 8px;
}
</style>
<div style="width:300px;height:500px;background:#fff;padding:10px;margin:0 auto;margin-top:30px;border-radius:10px;box-shadow:0 0 13px #ccc;">
<div class="switch-div switch-div1" style="">
<div class="icon-div"></div>
<span class="span">关</span>
</div>
<div style="width:100%;height:50px;"></div>
<div class="switch-div switch-div2" style="" data-text="禁用|启用">
<div class="icon-div"></div>
<span class="span">禁用</span>
</div>
</div>
</body>
</html>
<!--交互js-->
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(".switch-div1").click(function () {
var width = $(this).width();
var widthIcon = $(".icon-div").width();
var flag = $(this).attr("data-flag");
if (flag == undefined || flag == "0") {
flag = "1";
$(".switch-div1").css({ "textAlign": "left", "background": "#099dff", "color": "#fff" });
$(".switch-div1 .span").html('开').css({ "marginLeft": "8px" });
$(".switch-div1 .icon-div").animate({ left: width - widthIcon - 3 }, 300);
}
else {
flag = "0";
$(".switch-div1").css({ "textAlign": "right", "background": "#e3e3e3", "color": "#333" });
$(".switch-div1 .span").html('关').css({ "marginRight": "8px" });
$(".switch-div1 .icon-div").animate({ left: 3 }, 300);
}
$(this).attr("data-flag", flag);
});
$(".switch-div2").click(function () {
var flag = $(this).attr("data-flag");
var text = $(this).attr("data-text");
if (flag == undefined || flag == "0") {
flag = "1";
$(".switch-div2").addClass("switch-div-action");
$(".switch-div2 .span").html(text.split('|')[1]);
}
else {
flag = "0";
$(".switch-div2").removeClass("switch-div-action");
$(".switch-div2 .span").html(text.split('|')[0]);
}
$(this).attr("data-flag", flag);
});
})
</script>
