1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <style> 8 body, 9 html { 10 padding: 0; 11 margin: 0; 12 } 13 14 body, 15 html { 16 height: 100%; 17 /**隐藏滚动条**/ 18 overflow: hidden; 19 } 20 21 .box { 22 100%; 23 height: 100%; 24 background-color: pink; 25 } 26 27 .left { 28 80%; 29 height: 100%; 30 display: inline-block; 31 float: left; 32 position: relative; 33 /*padding-top: 65px;*/ 34 } 35 36 .content { 37 background-color: red; 38 95%; 39 height: 87%; 40 margin: 0 auto; 41 position: absolute; 42 top: 0; 43 left: 0; 44 margin-left: 2.5%; 45 margin-top: 58px; 46 } 47 48 .bar { 49 50px; 50 height: 50px; 51 background-color: yellow; 52 } 53 54 .bar-top { 55 position: absolute; 56 top: 10px; 57 left: 75px; 58 } 59 60 .bar-down { 61 position: absolute; 62 bottom: 10px; 63 left: 75px; 64 } 65 66 .right { 67 20%; 68 height: 100%; 69 display: inline-block; 70 background-color: blue; 71 float: right; 72 position: relative; 73 } 74 .bar-right { 75 position: absolute; 76 right: 100%; 77 top: 5px; 78 } 79 </style> 80 </head> 81 82 <body> 83 <div class="box"> 84 <div class="left"> 85 <div class="bar-top bar"></div> 86 <div class="content"> 87 88 </div> 89 <div class="bar-down bar"></div> 90 </div> 91 <div class="right"> 92 <div class="bar-right bar"></div> 93 <div class="con-right"></div> 94 </div> 95 </div> 96 <script src="jquery-1.11.1.min.js"></script> 97 <script> 98 $(function() { 99 $('.bar-top').click(function() { 100 goUpDown($('.content'),1000); 101 }) 102 $('.bar-down').click(function() { 103 goUpDown($('.content'),-1000); 104 }) 105 $('.bar-right').click(function(){ 106 if($('.right').width()!==0){ 107 rightBar($('.right'),20,0,$('.left'),80,100); 108 }else{ 109 rightBar($('.left'),100,80,$('.right'),0,20); 110 } 111 112 }) 113 function goUpDown(el,go) { 114 var id = setInterval(gos, 1); 115 var from=0; 116 function gos() { 117 if(go>0){ 118 from+=10; 119 }else{ 120 from-=10; 121 } 122 el.css("top", from + 'px'); 123 if(from == go) { 124 clearInterval(id); 125 var back = -go, 126 els = setInterval(backs, 1); 127 function backs() { 128 if(back<0){ 129 back += 10; 130 }else{ 131 back -= 10; 132 } 133 el.css("top", back + 'px'); 134 if(back == 0) { 135 clearInterval(els); 136 } 137 } 138 } 139 } 140 } 141 142 function rightBar(el,from,to,els,go,at) { 143 var id = setInterval(gos, 1); 144 function gos() { 145 from -= 1; 146 go +=1; 147 el.css("width", from + '%'); 148 els.css("width", go+'%'); 149 if(from == to&&go==at) { 150 clearInterval(id); 151 } 152 } 153 } 154 }) 155 </script> 156 </body> 157 158 </html>
