直角div实现

最新推荐文章于 2022-03-14 21:12:28 发布

原创最新推荐文章于 2022-03-14 21:12:28 发布 · 1.1k 阅读

CC 4.0 BY-SA版权

原理:将两个div旋转+移动

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
		<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
		<style type="text/css">
			.a{
			    border: 1px solid red;
			    height: 300px;
			    width: 400px;
			    position: relative;
			    top: 50px;
			    background: red;
			    margin: 0 auto;
			    visibility: hidden;
			    overflow: hidden;
			}
			.b{
				border: 1px solid blue;
			    height: 521px;
			    width: 648px;
			    position: relative;
			    transform: rotate(111deg);
	            -ms-transform: rotate(111deg);
	            -moz-transform: rotate(111deg);
	            -webkit-transform: rotate(111deg);
			    left: -226px;
			    top: -206px;
			    overflow: hidden;
			    visibility: hidden;
			}
			.c{
			    background: green;
			    height: 846px;
			    width: 971px;
			    position: relative;
	     		transform: rotate(250deg);
	            -ms-transform: rotate(250deg);
	            -moz-transform: rotate(250deg);
	    		-webkit-transform: rotate(250deg);
			    top: -28px;
			    visibility: visible;
			}
		</style>
	</head>
	<body style="overflow: hidden;">
		<button onclick="first()">显示第一个盒子</button>
		<button onclick="second()">显示第二个盒子</button>
		<button onclick="third()">显示第三个盒子</button>
		<div class="a">
			<div class="b">
				<div class="c" id="allmap"></div>
			</div>
		</div>
		<script type="text/javascript">
			var map = new BMap.Map("allmap");    // 创建Map实例
		    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
		    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
		    map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
		    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放   
		    var f=0,s=0,t=1;
			function first(){
				if(f%2==0){
					$('.a').hide();
				}else{
					$('.a').show();
				}
				f++;
			}	
			function second(){
				if(s%2==0){
					$('.b').hide();
				}else{
					$('.b').show();
				}
				s++;
			}	
			function third(){
				if(t%2==0){
					$('.c').show();
				}else{
					$('.c').hide();
				}
				t++;
			}	
		</script>
	</body>
	</html>