-
Notifications
You must be signed in to change notification settings - Fork 2
/
WHEEL.html
231 lines (219 loc) · 11.8 KB
/
WHEEL.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<meta name="renderer" content="webkit">
<title>css3纵向滚屏翻页，支持键盘，鼠标操作，写得好累，但还是不够完善，来自蓝靖宇宁</title>
<meta name="keywords" content="css3纵向滚屏翻页，支持键盘，鼠标操作，写得好累，但还是不够完善，来自蓝靖宇宁" />
<meta name="description" content="css3纵向滚屏翻页，支持键盘，鼠标操作，写得好累，但还是不够完善，来自蓝靖宇宁" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!--鼠标滚轮mousewheel插件，我直接将插件代码直接粘这里了，要不没地方单独放这个文件-->
<script>
!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)}})});
</script>
<!--mousewheel插件 end-->
<style type="text/css">
/*===reset===*/
body{color:#222;-webkit-text-size-adjust:none;}
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;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
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;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight: normal;}
fieldset,img{border:0; display:inline-block;}
address,caption,cite,dfn,em,th,var{font-style:normal;font-weight:normal;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{display:block; margin:0; padding:0;}/* HTML5 */
code,kbd,pre,samp{font-family:courier new,courier,monospace}
ol,ul{list-style:none;}
a{text-decoration:none; color:#222;}
a:hover{color:#000;text-decoration: none;zoom:1}
a:active{color:#666;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,select,button{ vertical-align: baseline; *vertical-align:middle;font-family: tahoma, \5b8b\4f53, arial; font-size: 100%; }
input[type=checkbox],input[type=radio]{vertical-align:middle; margin:0 5px;}
input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;}textarea{resize:none;}
textarea{overflow:auto; font:100% tahoma,\5b8b\4f53,arial;}
table{border-collapse:collapse; border-spacing:0;}
/*===reset end===*/
html,body{ width:100%; height:100%; overflow:hidden;}
.section-wrap{width:100%; height:100%; overflow:visible;
transition:transform 1s cubic-bezier(0.86,0,0.03,1);
-webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1);
-ms-transition:-ms-transform 1s cubic-bezier(0.86,0,0.03,1);
-moz-transition:-moz-transform 1s cubic-bezier(0.86,0,0.03,1);
-o-transition:-o-transform 1s cubic-bezier(0.86,0,0.03,1);}
.section-wrap .section{ position:relative; width:100%; height:100%; background-position:center center; background-repeat:no-repeat;}
.section-wrap .section .title{padding:150px 0 0 50px; color:#fff; font-size:40px;text-align:center; font-family:"Microsoft YaHei";}
.section-wrap .section .title p{ opacity:0}
.section-wrap .section .title .p-2{color:#ccc; font-size:20px;}
.section-wrap .section .title.active .p-1{
opacity:1;transform:translateY(-25px);
-webkit-transform:translateY(-25px);
-ms-transform:translateY(-25px);
-moz-transform:translateY(-25px);
-o-transform:translateY(-25px);
transition:all 2s cubic-bezier(0.86,0,0.8,1);
-webkit-transition:all 2s cubic-bezier(0.86,0,0.8,1);
-ms-transition:all 2s cubic-bezier(0.86,0,0.8,1);
-moz-transition:all 2s cubic-bezier(0.86,0,0.8,1);
-o-transition:all 2s cubic-bezier(0.86,0,0.8,1);}
.section-wrap .section .title.active .p-2{ opacity:1;
transform:translateY(-25px);
-webkit-transform:translateY(-25px);
-ms-transform:translateY(-25px);
-moz-transform:translateY(-25px);
-o-transform:translateY(-25px);
transition:all 2s cubic-bezier(0.5,0,0.9,1);
-webkit-transition:all 2s cubic-bezier(0.5,0,0.9,1);
-ms-transition:all 2s cubic-bezier(0.5,0,0.9,1);
-moz-transition:all 2s cubic-bezier(0.5,0,0.9,1);
-o-transition:all 2s cubic-bezier(0.5,0,0.9,1);}
.section-wrap .section-1{ background-color:#0066a5}
.section-wrap .section-2{ background-color:#065E69}
.section-wrap .section-3{ background-color:#0D2C7C}
.section-wrap .section-4{ background-color:#0C6242}
.section-wrap .section-5{ background-color:#413004}
.put-section-0{transform:translateY(0);
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
-moz-transform:translateY(0);
-o-transform:translateY(0); }
.put-section-1{transform:translateY(-100%);
-webkit-transform:translateY(-100%);
-ms-transform:translateY(-100%);
-moz-transform:translateY(-100%);
-o-transform:translateY(-100%);}
.put-section-2{transform:translateY(-200%);
-webkit-transform:translateY(-200%);
-ms-transform:translateY(-200%);
-moz-transform:translateY(-200%);
-o-transform:translateY(-200%);}
.put-section-3{transform:translateY(-300%);
-webkit-transform:translateY(-300%);
-ms-transform:translateY(-300%);
-moz-transform:translateY(-300%);
-o-transform:translateY(-300%);}
.put-section-4{transform:translateY(-400%);
-webkit-transform:translateY(-400%);
-ms-transform:translateY(-400%);
-moz-transform:translateY(-400%);
-o-transform:translateY(-400%);}
.section-btn{ position:fixed; right:40px;top:50%; width:14px;}
.section-btn li{margin-bottom:15px; background:#069052;text-align:center; color:#fff; cursor:pointer;}
.section-btn li.cur{ background:#0CEA87}
.go-btn{ opacity:1;
webkit-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
-webkit-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
-ms-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
-moz-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
-o-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
position:absolute;bottom:10px;left:48%;
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}
.go-btn:hover{
animation-play-state:paused;
-webkit-animation-play-state:paused;
-ms-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
}
@keyframes go-btn{
%0,%100{bottom:10px; opacity:1;}
50%{bottom:50px; opacity:.5}
}
@-webkit-keyframes go-btn{
%0,%100{bottom:10px; opacity:1;}
50%{bottom:50px; opacity:.5}
}
@-ms-keyframes go-btn{
%0,%100{bottom:10px; opacity:1;}
50%{bottom:50px; opacity:.5}
}
@-moz-keyframes go-btn{
%0,%100{bottom:10px; opacity:1;}
50%{bottom:50px; opacity:.5}
}
@-o-keyframes go-btn{
%0,%100{bottom:10px; opacity:1;}
50%{bottom:50px; opacity:.5}
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
html,body{width:100%; height:100%; overflow:scroll}
.section-btn{display:none;}
</style>
<![endif]-->
</head>
<body>
<div class="section-wrap">
<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>
<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>
<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>
<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>
<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>
</div>
<ul class="section-btn">
<li class="cur">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class="go-btn">«</div>
</body>
<script>
$(function(){
var btn_index=0;
/*右边按钮点击*/
$('.section-btn li').each(function(index) {
$(this).click(function(){
btn_index=index;
scroller();
})
});
/*翻页按钮点击*/
$('.go-btn').one('click',btn_go);
function btn_go(){
go_up();scroller();
setTimeout(function(){$('.go-btn').one('click',btn_go)},1000)
};
/*响应鼠标*/
$('.section-wrap').one('mousewheel',mouse_);
function mouse_(event){
if (event.deltaY<0) {go_up()}
else{go_down()}
scroller();
setTimeout(function(){$('.section-wrap').one('mousewheel',mouse_)},1000)
};
/*当前页面赋值*/
function go_up(){btn_index++;if(btn_index==$('.section-btn li').length){btn_index=$('.section-btn li').length-1};}
function go_down(){btn_index--;if(btn_index<0){btn_index=0};}
/*页面滑动*/
function scroller(){
$('.section-btn li').eq(btn_index).addClass('cur').siblings().removeClass('cur');
$('.section-wrap').attr("class","section-wrap").addClass(function() {
return "put-section-"+btn_index;
}).find('.section').eq(btn_index).find('.title').addClass('active');
};
/*响应键盘上下键*/
$(document).one('keydown',keyaction);
function keyaction(event){
var e=event||window.event;
var key=e.keyCode||e.which||e.charCode;
switch(key) {
case 38: go_down();scroller();
break;
case 40: go_up();scroller();
break;
};
setTimeout(function(){$(document).one('keydown',keyaction)},1000)
}
})
</script>
</html>