现在的网站有的时候为了简洁就是很多的单页滑屏滚动介绍，主要呈现方式有两种，一种是整体的元素一直排列下去，假设有五个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行Y轴定位，也可以通过margin-top实现，第二种就是所有的子元素和页面一样，都显示在当前页面，简单的实现第一种页面。
Html代码:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<div
class
=
"container"
>
<div
class
=
"wrapper"
>
<div
class
=
"page page0 active"
data-page=
"0"
>
第一页 博客园-FlyElephant
</div>
<div
class
=
"page page1"
data-page=
"1"
>
第二页
</div>
<div
class
=
"page page2"
data-page=
"2"
>
第三页
</div>
<div
class
=
"page page3"
data-page=
"3"
>
第四页
</div>
</div>
</div>
|
页面样式:
|
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
|
html,
body {
height: 100%;
padding: 0px;
margin: 0px;
}
.container {
height: 100%;
overflow: hidden;
}
.wrapper {
height: 100%;
touch-action: none;
transition: all 1000ms ease;
}
.page {
height: 100%;
width: 100%;
}
.page0 {
background: #551A8B;
}
.page1 {
background: #FF8247;
}
.page2 {
background: #CD919E;
}
.page3 {
background: #98FB98;
}
|
鼠标滑动控制代码，如果需要获取鼠标的滚轮事件可以直接通过JavaScript，也可以通过query.mousewheel.min.js插件来写,原生态的JS:
|
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
|
/** This is high-level function.
* It must react to delta being more/less than zero.
*/
function handle(delta) {
if
(delta < 0)
…;
else
…;
}
/** Event handler for mouse wheel event.
*/
function wheel(
event
){
var
delta = 0;
if
(!
event
)
/* For IE. */
event
= window.
event
;
if
(
event
.wheelDelta) {
/* IE/Opera. */
delta =
event
.wheelDelta/120;
}
else
if
(
event
.detail) {
/** Mozilla case. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
delta = -
event
.detail/3;
}
/** If delta is nonzero, handle it.
* Basically, delta is now positive if wheel was scrolled up,
* and negative, if wheel was scrolled down.
*/
if
(delta)
handle(delta);
/** Prevent default actions caused by mouse wheel.
* That might be ugly, but we handle scrolls somehow
* anyway, so don't bother here..
*/
if
(
event
.preventDefault)
event
.preventDefault();
event
.returnValue =
false
;
}
/** Initialization code.
* If you use your own event management code, change it as required.
*/
if
(window.addEventListener)
/** DOMMouseScroll is for mozilla. */
window.addEventListener(
'DOMMouseScroll'
, wheel,
false
);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;
|
通过jQuery插件控制控制滚动的代码:
|
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
|
<script type=
"text/javascript"
>
$(function() {
$(
'.container'
).
on
(
'mousewheel'
, function(
event
) {
//mac自然状态向上是-1
//window向上滑动时候是1 向下-1
console.log(
event
.deltaX,
event
.deltaY,
event
.deltaFactor);
var
currentPage = parseInt($(
'.active'
).attr(
'data-page'
));
if
(
event
.deltaY > 0) {
var
prevpage = currentPage - 1;
if
(prevpage >=0) {
$(
'.page'
+ prevpage).addClass(
'active'
);
$(
'.page'
+ currentPage).removeClass(
'active'
);
$(
'.wrapper'
).css({
'transform'
:
'translate(0,'
+ (prevpage * -100) +
'%)'
});
}
}
else
{
var
nextpage = currentPage + 1;
if
(nextpage < 4) {
$(
'.page'
+ nextpage).addClass(
'active'
);
$(
'.page'
+ currentPage).removeClass(
'active'
);
$(
'.wrapper'
).css({
'transform'
:
'translate(0,'
+ (nextpage * -100) +
'%)'
});
}
}
});
});
</script>
|
关于滚轮的时间的控制，以及不确定页面元素时候的代码没有给出判断，大体思路不变，其他的仅供参考~
本文转自Fly_Elephant博客园博客，原文链接：http://www.cnblogs.com/xiaofeixiang/p/5042324.html，如需转载请自行联系原作者
