zoukankan html css js c++ java
【动画】上下滑动

  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>
查看全文
相关阅读:
php读取excel日期类型数据的例子
 asp.net字符串分割函数用法
 asp.net页面与页面之间传参数值
 css3中定义required,focus,valid和invalid样式
 java写入文件的几种方法小结
 php file_get_contents与curl性能比较
 Jquery库及其他库之间的$命名冲突解决办法
 [转]DOS特殊字符转义方法
 [转]删除SQL Server Management Studio中保存的帐户信息
 Jpeg2000 简介
原文地址：https://www.cnblogs.com/sunmyboke/p/7411715.html