JavaScript知识点：原生JS实现图片网格式渐显、渐隐效果
2017-6-13编辑:daibenhua
先给出效果图：
写的小组件支持图片的渐显、渐隐，并且可以是有序、随机两种方式。
我采用的原型是属性写在构造函数内，方法写在原型对象内。方法写构造函数内有个问题，就是每次调用这个方法就相当于重新实例化一次，举个粟子：
实现网格效果的原理上是将读取图片的宽高，按照设定的参数，分成等高宽的网格(我用的span标签表示的网格)，网格利用定位铺满整个图片，每个网格的背景图都是原图片，原理同sprite，利用background-position属性改变显示区域。接下来就是按照设定的顺序实现渐显或渐隐。渐显或渐隐用的是JS的animation属性和CSS3的animation属性在属性值上有所区别，这次使用也才知道JS的animation属性里有个animationFillMode(规定当动画不播放时(当动画完成时，或当动画有一个延迟未开始播放时)，要应用到元素的样式。)属性值。
我绑定的事件是点击，完全可以用其他事件或页面加载触发。我的代码稍加改动就可以实现网格式轮播图。
下面给出源代码：
?
|
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 |
|
以上所述是小编给大家介绍的原生JS实现图片网格式渐显、渐隐效果，希望对大家有所帮助