-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdemo.html
133 lines (119 loc) · 3.12 KB
/
demo.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>scroll animate</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.slider {
height: 800px;
border: 1px solid #ddd;
text-align: center;
position: relative;
}
#i4 {
height: 50px;
}
#i4.actived {
background: red;
}
.slider p {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border: 1px solid #ddd;
transform: translate(-50%, -50%) rotate(60deg);
transition: all 1s;
font-size: 100px;
color: red;
line-height: 100px;
}
.slider.actived p {
transform: translate(-50%, -50%);
color: #abcdef;
}
#debug {
position: fixed;
top: 100px;
right: 20px;
}
.slider:nth-child(1) {}
</style>
</head>
<body>
<div class="container">
<div class="slider-wrap">
<div class="slider" id="1"><p>1</p><span></span></div>
<div class="slider" id="2"><p>2</p><span></span></div>
<div class="slider" id="3"><p>3</p><span></span></div>
<div class="slider" id="i4"><p>4</p><span></span></div>
<div class="slider" id="5"><p>5</p><span></span></div>
<div class="slider" id="6"><p>6</p><span></span></div>
<div class="slider" id="7"><p>7</p><span></span></div>
<div class="slider" id="8"><p>8</p><span></span></div>
</div>
<div id="debug"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="mz-scroll.js"></script>
<script>
/*
* options 配置 如果传false则删除此元素监听任务
*
* once {boolean} 是否执行一次 default false
* delay {int} 元素进入区域延时
* topOffset {int} 元素顶部到窗口底部的距离多少算进入区域 default 0
* bottomOffset {int} 元素底部到窗口顶部部的距离多少算进入区域 default 0
* activeClass {string} 元素进入区域要添加的类
* scrollIn {function} 元素进入区域的回调
* scrollOut {function} 元素离开区域的回调
* scrolling
*
*/
$('.slider').addScroll({
once: false,
topOffset: -200,
bottomOffset: -300,
inScreen: 0.5,//占屏幕50%时激活
activeClass: 'actived',
scrollIn: function() {
$('p', this).stop().animate({'width': 200, 'height': 200, 'line-height': '200px'})
},
scrollOut: function() {
$('p', this).stop().animate({'width': 100, 'height': 100, 'line-height': '100px'})
},
scrolling: function(offset) {
//top += offset/50;
//$('p', this).css('top', top + '%')
console.log(this.id, offset)
}
});
var winH = $(window).height();
$('#i4').addScroll(false).addScroll({
once: false,
topOffset: -(winH/2-50),
bottomOffset: -(winH/2-50),
activeClass: 'actived',
sensitive: true
});
var debug = $('#debug')[0];
$(window).on('scroll', function() {
debug.innerHTML = '';
$('.slider').each(function() {
var elem = this,
elemHeight = elem.offsetHeight,
elemOfsTop = $(elem).offset().top,
windowScrollTop = $(window).scrollTop(),
windowHeight = $(window).height();
debug.innerHTML += '<br> ' + elem.id + ' 头部距离窗口底部距离：' + (elemOfsTop - windowScrollTop - windowHeight) + 'px' +
'<br> ' + elem.id + ' 底部距离窗口顶部距离：' + (windowScrollTop - elemOfsTop - elemHeight) + 'px';
});
});
</script>
</body>
</html>