zoukankan      html  css  js  c++  java
  • 仿IOS 开关按钮

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>apple button</title>
    		<style type="text/css">
    			#div1 {
    				 170px;
    				height: 100px;
    				border-radius: 50px;
    				border: 1px solid green;
    				position: relative;
    			}
    			
    			#div2 {
    				 96px;
    				height: 96px;
    				border-radius: 48px;
    				position: absolute;
    				background: red;
    				box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
    			}
    			
    			.open1 {
    				background: blue;
    			}
    			
    			.open2 {
    				top: 2px;
    				right: 1px;
    			}
    			
    			.close1 {
    				background: yellow;
    				border: 3px solid green;
    				border-left: transparent;
    			}
    			
    			.close2 {
    				left: 0px;
    				top: 0px;
    				border: 2px solid rgba(0, 0, 0, 0.1);
    			}
    		</style>
    
    		<script type="text/javascript">
    			window.onload = function() {
    				var div2 = document.getElementById("div2");
    				var div1 = document.getElementById("div1");
    				div2.onclick = function() {
    					div1.className = (div1.className == "close1") ? "open1" : "close1";
    					div2.className = (div2.className == "close2") ? "open2" : "close2";
    				}
    			}
    		</script>
    	</head>
    
    	<body>
    		<div id="div1" class="open1">
    			<div id="div2" class="open2"></div>
    		</div>
    	</body>
    
    </html>
    

      

  • 相关阅读:
    C语言之分支语句
    C语言之运算符与表达式
    C语言之数据类型④——中文字符
    独特的对象引用:this
    理解赋值“=”的含义
    编写类的 “模板”
    类的定义
    Java语言规范
    第一周总结
    定义常量
  • 原文地址:https://www.cnblogs.com/libin-1/p/5747552.html
Copyright © 2011-2022 走看看