关闭

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

897人阅读 评论(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" onclick="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" onclick="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>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:146713次
    • 积分:1875
    • 等级:
    • 排名:千里之外
    • 原创:57篇
    • 转载:37篇
    • 译文:0篇
    • 评论:13条
    最新评论