依托于bootstracp的jquery滑动开关

最新推荐文章于 2024-07-26 03:35:47 发布

zhangxiaomin19921

最新推荐文章于 2024-07-26 03:35:47 发布

阅读量517

点赞数

分类专栏： js 文章标签： java web

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>jquery做的滑动按钮开关</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; <!--添加圆角边框 -->
}  
  
.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效果/js/jquery.min.js"></script>  
<script type="text/javascript" src="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>