滑动开关
<style>
* {
margin: 0;
padding: 0
}
#container {
width: 200px;
height: 50px;
background: green;
border-radius: 25px;
overflow: hidden;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
border: 2px solid black;
}
.container_hover {
background: blue !important;
}
.inner {
width: 40px;
height: 40px;
background: red;
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
border-radius: 100%;
margin-left: 5px;
margin-top: 5px;
}
.inner_hover {
margin-left: 155px;
background: white;
}
</style>
</head>
<body>
<div id="container">
<div class="inner"></div>
</div>
<script>
$("#container").click(
function () {
if ($(this).hasClass("container_hover")) {
$(this).removeClass("container_hover")
$(this).find(".inner").removeClass("inner_hover");
} else {
$(this).addClass("container_hover")
$(this).find(".inner").addClass("inner_hover");
}
}
);
</script>
</body>
</html>
请爱好前端技术的朋友,联系我,有问题大家一起讨论