首页 > 代码库 > 时下流行的css3页面纵向滑动效果
时下流行的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">«</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>
时下流行的css3页面纵向滑动效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。