【动画】上下滑动

来源：互联网发布：java cors 跨域编辑：程序博客网时间：2024/05/23 19:13
  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>
阅读全文
0 0