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, 5b8b4f53, 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,5b8b4f53,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{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">«</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>