原生JS实现图片网格式渐显、渐隐效果

前端之家收集整理的这篇文章主要介绍了原生JS实现图片网格式渐显、渐隐效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

先给出效果图:

  写的小组件支持图片的渐显、渐隐,并且可以是有序、随机两种方式。

  我采用的原型是属性写在构造函数内,方法写在原型对象内。方法写构造函数内有个问题,就是每次调用这个方法就相当于重新实例化一次,举个粟子:

  实现网格效果的原理上是将读取图片的宽高,按照设定的参数,分成等高宽的网格(我用的span标签表示的网格),网格利用定位铺满整个图片,每个网格的背景图都是原图片,原理同sprite,利用background-position属性改变显示区域。接下来就是按照设定的顺序实现渐显或渐隐。渐显或渐隐用的是JS的animation属性和CSS3的animation属性属性值上有所区别,这次使用也才知道JS的animation属性里有个animationFillMode(规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。)属性值。

  我绑定的事件是点击,完全可以用其他事件或页面加载触发。我的代码稍加改动就可以实现网格式轮播图。

  下面给出源代码

网格<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>

以上所述是小编给大家介绍的原生JS实现图片网格式渐显、渐隐效果。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/js/38839.html

猜你在找的JavaScript相关文章