edgarman

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

时下流行的css3页面纵向滑动效果 

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  6 <meta name="renderer" content="webkit">
  7 <title>css3纵向滚屏翻页，支持键盘，鼠标操作，写得好累，但还是不够完善，来自蓝靖宇宁</title>
  8 <meta name="keywords" content="css3纵向滚屏翻页，支持键盘，鼠标操作，写得好累，但还是不够完善，来自蓝靖宇宁" />
  9 <meta name="description" content="css3纵向滚屏翻页，支持键盘，鼠标操作，写得好累，但还是不够完善，来自蓝靖宇宁" />
 10 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 11 
 12 <!--鼠标滚轮mousewheel插件，我直接将插件代码直接粘这里了，要不没地方单独放这个文件-->
 13 <script>
 14 !function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.12",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});
 15 </script>
 16 <!--mousewheel插件 end-->
 17 
 18 <style type="text/css">
 19 /*===reset===*/
 20 body{color:#222;-webkit-text-size-adjust:none;}
 21 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl, dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,iframe{margin:0; padding:0;}
 22 h1,h2,h3,h4,h5,h6{font-size:100%;}
 23 body,button,input,select,textarea {font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;font-size:62.5%; line-height:1.5;}
 24 h1,h2,h3,h4,h5,h6{font-size:100%;font-weight: normal;}
 25 fieldset,img{border:0; display:inline-block;}
 26 address,caption,cite,dfn,em,th,var{font-style:normal;font-weight:normal;}
 27 article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{display:block; margin:0; padding:0;}/* HTML5 */
 28 code,kbd,pre,samp{font-family:courier new,courier,monospace}
 29 ol,ul{list-style:none;}
 30 a{text-decoration:none; color:#222;}
 31 a:hover{color:#000;text-decoration: none;zoom:1}
 32 a:active{color:#666;}
 33 sup{vertical-align:text-top;}
 34 sub{vertical-align:text-bottom;}
 35 input,select,button{ vertical-align: baseline; *vertical-align:middle;font-family: tahoma, \5b8b\4f53, arial; font-size: 100%;  }
 36 input[type=checkbox],input[type=radio]{vertical-align:middle; margin:0 5px;}
 37 input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;}textarea{resize:none;}
 38 textarea{overflow:auto; font:100% tahoma,\5b8b\4f53,arial;}
 39 table{border-collapse:collapse; border-spacing:0;}
 40 /*===reset end===*/
 41 
 42 html,body{ width:100%; height:100%; overflow:hidden;}
 43 .section-wrap{width:100%; height:100%; overflow:visible;
 44 transition:transform 1s cubic-bezier(0.86,0,0.03,1);
 45 -webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1);
 46 -ms-transition:-ms-transform 1s cubic-bezier(0.86,0,0.03,1);
 47 -moz-transition:-moz-transform 1s cubic-bezier(0.86,0,0.03,1);
 48 -o-transition:-o-transform 1s cubic-bezier(0.86,0,0.03,1);}
 49 .section-wrap .section{ position:relative; width:100%; height:100%; background-position:center center; background-repeat:no-repeat;}
 50 .section-wrap .section .title{padding:150px 0 0 50px; color:#fff; font-size:40px;text-align:center; font-family:"Microsoft YaHei";}
 51 .section-wrap .section .title p{ opacity:0}
 52 .section-wrap .section .title .p-2{color:#ccc; font-size:20px;}
 53 .section-wrap .section .title.active .p-1{ 
 54  opacity:1;transform:translateY(-25px);
 55 -webkit-transform:translateY(-25px);
 56 -ms-transform:translateY(-25px);
 57 -moz-transform:translateY(-25px);
 58  -o-transform:translateY(-25px); 
 59  transition:all 2s cubic-bezier(0.86,0,0.8,1);
 60  -webkit-transition:all 2s cubic-bezier(0.86,0,0.8,1);
 61  -ms-transition:all 2s cubic-bezier(0.86,0,0.8,1);
 62  -moz-transition:all 2s cubic-bezier(0.86,0,0.8,1); 
 63  -o-transition:all 2s cubic-bezier(0.86,0,0.8,1);}
 64 .section-wrap .section .title.active .p-2{ opacity:1; 
 65 transform:translateY(-25px);
 66 -webkit-transform:translateY(-25px);
 67 -ms-transform:translateY(-25px);
 68 -moz-transform:translateY(-25px);
 69  -o-transform:translateY(-25px);
 70 transition:all 2s cubic-bezier(0.5,0,0.9,1);
 71 -webkit-transition:all 2s cubic-bezier(0.5,0,0.9,1);
 72 -ms-transition:all 2s cubic-bezier(0.5,0,0.9,1);
 73 -moz-transition:all 2s cubic-bezier(0.5,0,0.9,1);
 74 -o-transition:all 2s cubic-bezier(0.5,0,0.9,1);}
 75 .section-wrap .section-1{ background-color:#0066a5}
 76 .section-wrap .section-2{ background-color:#065E69}
 77 .section-wrap .section-3{ background-color:#0D2C7C}
 78 .section-wrap .section-4{ background-color:#0C6242}
 79 .section-wrap .section-5{ background-color:#413004}
 80 .put-section-0{transform:translateY(0);
 81 -webkit-transform:translateY(0);
 82 -ms-transform:translateY(0);
 83 -moz-transform:translateY(0);
 84 -o-transform:translateY(0); }
 85 .put-section-1{transform:translateY(-100%);
 86 -webkit-transform:translateY(-100%);
 87 -ms-transform:translateY(-100%);
 88 -moz-transform:translateY(-100%);
 89 -o-transform:translateY(-100%);}
 90 .put-section-2{transform:translateY(-200%);
 91 -webkit-transform:translateY(-200%);
 92 -ms-transform:translateY(-200%);
 93 -moz-transform:translateY(-200%);
 94 -o-transform:translateY(-200%);}
 95 .put-section-3{transform:translateY(-300%);
 96 -webkit-transform:translateY(-300%);
 97 -ms-transform:translateY(-300%);
 98 -moz-transform:translateY(-300%);
 99 -o-transform:translateY(-300%);}
100 .put-section-4{transform:translateY(-400%);
101 -webkit-transform:translateY(-400%);
102 -ms-transform:translateY(-400%);
103 -moz-transform:translateY(-400%);
104 -o-transform:translateY(-400%);}
105 .section-btn{ position:fixed; right:40px;top:50%; width:14px;}
106 .section-btn li{margin-bottom:15px; background:#069052;text-align:center; color:#fff; cursor:pointer;}
107 .section-btn li.cur{ background:#0CEA87}
108 .go-btn{ opacity:1;
109 webkit-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
110 -webkit-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
111 -ms-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
112 -moz-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
113 -o-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
114  transform:rotate(-90deg);
115  -webkit-transform:rotate(-90deg); 
116  -ms-transform:rotate(-90deg); 
117  -moz-transform:rotate(-90deg); 
118  -o-transform:rotate(-90deg); 
119   position:absolute;bottom:10px;left:48%;
120   width:60px; height:60px; border-radius:100%; line-height:60px; text-align:center; font-size:20px; color:#fff; border:1px solid #fff; cursor:pointer; overflow:hidden}
121 .go-btn:hover{
122     animation-play-state:paused;
123     -webkit-animation-play-state:paused;
124     -ms-animation-play-state:paused;
125     -moz-animation-play-state:paused;
126     -o-animation-play-state:paused;
127 }
128 @keyframes go-btn{
129 %0,%100{bottom:10px; opacity:1;}
130 50%{bottom:50px; opacity:.5}
131     }
132 @-webkit-keyframes go-btn{
133 %0,%100{bottom:10px; opacity:1;}
134 50%{bottom:50px; opacity:.5}
135     }
136 @-ms-keyframes go-btn{
137 %0,%100{bottom:10px; opacity:1;}
138 50%{bottom:50px; opacity:.5}
139     }
140 @-moz-keyframes go-btn{
141 %0,%100{bottom:10px; opacity:1;}
142 50%{bottom:50px; opacity:.5}
143     }
144 @-o-keyframes go-btn{
145 %0,%100{bottom:10px; opacity:1;}
146 50%{bottom:50px; opacity:.5}
147     }
148 </style>
149 <!--[if lte IE 8]>
150 <style type="text/css">
151     html,body{width:100%; height:100%; overflow:scroll}
152     .section-btn{display:none;}
153 </style>
154 <![endif]-->
155 
156 </head>
157 
158 <body>
159 <div class="section-wrap">
160         <div class="section section-1"><div class="title active"><p class="p-1">点右边的按钮,底部的按钮，滚动鼠标滚轮,按下键盘方向上下键查看效果</p><p class="p-2">Just the way u are!</p></div></div>
161         <div class="section section-2"><div class="title"><p class="p-1">无论我们距离有多远，我都永远by your side!</p><p class="p-2">I am just kidding!</p></div></div>
162         <div class="section section-3"><div class="title"><p class="p-1">I will never say never</p><p class="p-2">From justin bieber</p></div></div>
163         <div class="section section-4"><div class="title"><p class="p-1">you are just like the angle</p><p class="p-2">I tell you seriously</p></div></div>
164         <div class="section section-5"><div class="title"><p class="p-1">life sucks sometime somehow</p><p class="p-2">I feel that</p></div></div>
165     </div>
166     <ul class="section-btn">
167       <li class="cur">1</li>
168       <li>2</li>
169       <li>3</li>
170       <li>4</li>
171       <li>5</li>
172     </ul>
173     <div class="go-btn">&laquo;</div>
174 </body>
175 
176 <script>
177     $(function(){
178         var btn_index=0;
179         /*右边按钮点击*/
180         $('.section-btn li').each(function(index) {
181             $(this).click(function(){
182                 btn_index=index;
183                 scroller();
184             })
185         });
186         /*翻页按钮点击*/
187         $('.go-btn').one('click',btn_go);
188         function btn_go(){
189             go_up();scroller();    
190             setTimeout(function(){$('.go-btn').one('click',btn_go)},1000)
191         };
192         /*响应鼠标*/
193         $('.section-wrap').one('mousewheel',mouse_);
194         function mouse_(event){
195             if (event.deltaY<0) {go_up()}
196             else{go_down()}
197             scroller();
198             setTimeout(function(){$('.section-wrap').one('mousewheel',mouse_)},1000)
199         };
200         
201         /*当前页面赋值*/
202         function go_up(){btn_index++;if(btn_index==$('.section-btn li').length){btn_index=$('.section-btn li').length-1};}
203         function go_down(){btn_index--;if(btn_index<0){btn_index=0};}
204         
205         /*页面滑动*/
206         function scroller(){
207             $('.section-btn li').eq(btn_index).addClass('cur').siblings().removeClass('cur');    
208             $('.section-wrap').attr("class","section-wrap").addClass(function() {
209                     return "put-section-"+btn_index;
210              }).find('.section').eq(btn_index).find('.title').addClass('active');
211         };
212         
213         /*响应键盘上下键*/
214         $(document).one('keydown',keyaction);
215         function keyaction(event){
216             var e=event||window.event;
217             var key=e.keyCode||e.which||e.charCode;
218             switch(key)    {
219                 case 38: go_down();scroller();    
220                 break;
221                 case 40: go_up();scroller();    
222                 break;
223             };
224             setTimeout(function(){$(document).one('keydown',keyaction)},1000)
225         }
226         
227         
228     })
229 
230 </script>
231 </html>

 

posted on 2015-01-26 21:06  edgarman  阅读(4119)  评论(0)    收藏  举报