利用jquery做的滑动按钮开关

最新推荐文章于 2023-05-17 17:45:53 发布

十年树木_2015

最新推荐文章于 2023-05-17 17:45:53 发布

阅读量8.3k

点赞数 1

分类专栏： JQuery

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

版权

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

代码：

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

.btn1{
  float: left;
}

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

.move{
  z-index: 100;
  width: 40px;
  border-radius: 20px;
  height: 40px;
  position: absolute;
  cursor: pointer;
  border: 1px solid #828282;
  background-color: #f1eff0;
  box-shadow: 1px 2px 2px 1px #fff inset,0 0 5px 1px #999;
}
.on .move{
  left: 60px;
}
.on.btn_fath{
  background-color: #5281cd;
}
.off.btn_fath{
  background-color: #828282;
}
</style>
<body>
<div class="switch">
  <div class="btn_fath clearfix on" οnclick="toogle(this)">
    <div class="move" data-state="on"></div>
    <div class="btnSwitch btn1">ON</div>
    <div class="btnSwitch btn2 ">OFF</div>
  </div>

  <div class="btn_fath clearfix off" οnclick="toogle(this)">
    <div class="move" data-state="off"></div>
    <div class="btnSwitch btn1">ON</div>
    <div class="btnSwitch btn2 ">OFF</div>
  </div>
</div>

<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">
function toogle(th){
  var ele = $(th).children(".move");
  if(ele.attr("data-state") == "on"){
    ele.animate({left: "0"}, 300, function(){
      ele.attr("data-state", "off");
      alert("关！");
    });
    $(th).removeClass("on").addClass("off");
  }else if(ele.attr("data-state") == "off"){
    ele.animate({left: '60px'}, 300, function(){
      $(this).attr("data-state", "on");
      alert("开！");
    });
    $(th).removeClass("off").addClass("on");
  }
}
</script>
</body>
</html>

需要注意的是：

1、这边滑动使用的速度是300ms，好像是匀速，没有线性的快慢那种；试着找下能不能像css3中ease那种线性运动的。

2、animate方法中的回调函数，即运动结束后调用的function。

做后的效果：