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>
时间： 2024-08-06 11:35:51