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 width: 100%;
23 height: 100%;
24 background-color: pink;
25 }
26
27 .left {
28 width: 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 width: 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 width: 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 width: 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>
