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