开关按钮

看效果

默认

点击后

思路

1.使用累加器计算点击次数，每点一次累加

2.使用jquery控制dom节点，添加动画

代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				list-style: none;
				text-decoration: none;
			}
			
			body {
				background-color: #222;
			}
			
			.box {
				width: 70px;
				height: 30px;
				background-color: #fff;
				border-radius: 20px;
				margin: 40px auto;
				box-sizing: border-box;
				position: relative;
				transition: .55s ease;
			}
			
			.yuan {
				position: absolute;
				width: 35px;
				height: 30px;
				box-sizing: border-box;
				background-color: pink;
				border-radius: 20px;
				font-size: 12px;
				line-height: 30px;
				text-align: center;
				color: #fff;
				font-weight: bold;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="yuan">
				<p>OFF</p>
			</div>
		</div>
		<div>

	</body>
	<script type="text/javascript">
		$(function() {
				var i = 0;
				$(".yuan").click(function() {
					i++;
					if(i%2==1){
						$(this).animate({
							
							left:"35px"
						},100).children().html("ON");
						$(".box").css("background-color","skyblue");
						$('body').css("background-color","#fff");
					}else{
							$(this).animate({
							left:"0px"
						},100).children().html("OFF");
						$(".box").css("background-color","#fff");
						$('body').css("background-color","#222");
					}
				})
		})
	</script>

</html>
posted @ 2021-10-08 11:04  禾耳  阅读(57)  评论(0)    收藏  举报