jquery--比较好看的开关按钮

效果图:
在这里插入图片描述

<div class="switch">
    <div class="btn"></div>
</div>

css

* {
	margin:0;
	padding:0;
}
body{padding:30px;}
.switch {
	padding:2px;
	width:60px;
	height:20px;
	background-color:#ccc;
	cursor:pointer;
	transition:0.4s;
	border-radius:40px;
}
.btn {
	width:20px;
	height:20px;
	background-color:white;
	transition:0.4s;
	margin-left:0px;
	border-radius:100%;
}
.right {
	float:right;
}
.bgchage {
	background-color:#03a9f4;
}

jquery

$(".switch").on("click", function() {
    $(".switch").toggleClass("bgchage");
    $(".btn").toggleClass("right");
});
发布了167 篇原创文章 · 获赞 52 · 访问量 6918

猜你喜欢

转载自blog.csdn.net/qq_42363032/article/details/103933306