利用css3动画效果编写滑动按钮开关

最新推荐文章于 2024-08-05 14:55:17 发布

十年树木_2015

最新推荐文章于 2024-08-05 14:55:17 发布

阅读量4k

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/qq_30337695/article/details/52382104

版权

javaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3做的滑动开关效果</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
</head>
<style>
.switch{
    width: 100px;
    margin: 100px 0px 0 100px;
}
.btn_fath{
  margin-top: 10px;
  position: relative;
  border-radius: 20px;
}

.on.btn_fath {
  background-color: #5281cd;
}
.on.active.btn_fath {
  background-color: #828282;
}

.off.btn_fath {
  background-color: #828282;
}
.off.active.btn_fath {
  background-color: #5281cd;
}


.btn1{
  float: left;
}

.btn2{
  float: right;
}

.switchBtn{
  height: 40px;
  width: 50px;
  border:none;
  color: #fff;
  line-height: 40px;
  font-size: 16px;
  text-align: center;
  z-index: 1;
}

.move{
  width: 40px;
  height: 40px;
  position: absolute;
  border-radius: 20px;
  z-index: 100;
  border: 1px solid #828282;
  background-color: #f1eff0;
  cursor: pointer;
  box-shadow: 1px 2px 2px 1px #fff inset,0 0 5px 1px #999;
  transition:transform ease 0.5s ;
}

.on .move{
  left: 60px;
}
.off .move{
  left: 0;
}
.active.on .move{
  transform: translate(-60px,0px);
}

.active.off .move{
  transform: translate(60px,0px);
}

</style>
<body>

<div class="switch">
  <div class="btn_fath clearfix la_state" οnclick="toogle(this)">
    <div class="move"></div>
    <div class="switchBtn btn1">ON</div>
    <div class="switchBtn btn2 ">OFF</div>
  </div>

  <div class="btn_fath clearfix yj_state" οnclick="toogle(this)">
    <div class="move"></div>
    <div class="switchBtn btn1">ON</div>
    <div class="switchBtn btn2 ">OFF</div>
  </div>
</div>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript">

//初始化页面开关是on 还是off状态的
$(function(){
  $(".la_state").addClass("on");
  $(".yj_state").addClass("off");
})


function toogle(th){
  var ele = $(th);
  ele.toggleClass('active');
}

</script>
</body>
</html>