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

Posted 2020-09-21 悠悠洛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js实现图片网格式渐显渐隐效果相关的知识，希望对你有一定的参考价值。

　　昨天晚上看完欧冠决赛，今天一觉醒来已是下午，吃过饭就寻思着写点什么，正好上周花了好几个小时温习原型、原型对象、原型链的知识，这次就用原型的概念实现图片网格式效果（网上大多是利用jQuery实现，jQuery提供的很多额外的方法和选择器确实方便许多）。

　　先给出效果图：

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

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

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

　　我绑定的事件是点击，完全可以用其他事件或页面加载触发。

　　毫无疑问渐隐、渐显效果实现部分的代码很有问题，从重构的角度来说，代码内容出现重复就可以提炼出一个新函数。说实话js的原型、原型链的基础知识掌握的比较全，但是在工作中几乎没用到过，可能用的多就就是给引用类型Array扩展一个indexOf()方法等，用原型的概念编写小应用还真是第一次，我也会去下载一些相关插件，看看它们的源码中是如何用原型的概念来编程的。

　　下面给出源代码：

  1 <!doctype html>
  2 <head>
  3 <title>网格效果</title>
  4 <style>
  5     @charset "utf-8";
  6     /*css reset*/
  7     html{font-family:"Helvetica Neue",Helvetica,STHeiTi,sans-serif;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;}
  8     body{-webkit-overflow-scrolling:touch;margin:0;}
  9     ul{margin:0;padding:0;list-style:none;outline:none;}
 10     dl,dd{margin:0;}
 11     a{display:inline-block;margin:0;padding:0;text-decoration:none;background:transparent;outline:none;color:#000;}
 12     a:link,a:visited,a:hover,a:active{text-decoration:none;color:currentColor;}
 13     a,dt,dd{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;}
 14     img{border:0;}
 15     p{margin:0;}
 16     input,button,select,textarea{margin:0;padding:0;border:0;outline:0;background-color:transparent;}
 17     /*css*/
 18     .origin-pic {
 19         display: inline-block;
 20         width: 200px;
 21         height: 200px;
 22     }
 23 
 24     .grid-area {
 25         display: inline-block;
 26         position: relative;
 27         width: 200px;
 28         height: 200px;
 29     }
 30 
 31     .grid {
 32         position: absolute;
 33     }
 34 
 35     #img1 {
 36         opacity: 1;
 37         width: 200px;
 38         height: 200px;
 39     }
 40 
 41     @keyframes fadeout{
 42         0% {opacity: 1}
 43         100% {opacity: 0}
 44     }
 45 
 46     @keyframes fadein{
 47         0% {opacity: 0}
 48         100% {opacity: 1}
 49     }
 50 </style>
 51 </head>
 52 <body>
 53 <div>
 54     <img class="origin-pic" src="./pic.jpg" />
 55 </div>
 56 <div id="grid_area" class="grid-area">
 57     <img id="img1" src="./pic.jpg" />
 58 </div>
 59 
 60 <script>
 61 var gridSetting = {
 62     \'cell\': 10,  // 行、列数量
 63     \'mode\': \'fadeout\',  // 备选参数: fadeout, fadein
 64     \'sort\': \'random\',  // 备选参数: inturn, random
 65     \'num\': 1,  // 每次发生动作的网格数，目前只支持1
 66     complete: function() {  // 事件完成时的回调函数
 67         console.log(\'ok!\');
 68     }
 69 };
 70 var img1 = document.getElementById(\'img1\');
 71 (function(doc, setting, ele) {
 72     var defaults = {
 73         \'speed\': 20,
 74     };
 75 
 76     function Grid(ele) {
 77         this.ele = ele;
 78         this.settings = Object.assign({}, setting, defaults);
 79     }
 80 
 81     Grid.prototype = {
 82         constructor: Grid,
 83 
 84         // 构建UI
 85         _create: function() {
 86             var img = this.ele,
 87                 settings = this.settings,
 88                 cell = settings.cell,
 89                 imgWidth = img.width,
 90                 imgHeight = img.height,
 91                 gridWidth = imgWidth / cell,  // 每个网格宽度
 92                 gridHeight = imgHeight / cell,  // 每个网格高度
 93                 currentTop = 0,
 94                 currentLeft = 0,
 95                 fragment = doc.createDocumentFragment(),
 96                 i = 0,
 97                 gridArr = [];
 98             img.style.display = \'none\';
 99             for (; i < cell * cell; i++) {
100                 var spanNode = doc.createElement(\'span\');
101                 spanNode.setAttribute(\'id\', i);
102                 spanNode.style.cssText +=   \'position: absolute;\' +
103                                             \'top: \' + currentTop + \'px;\' +
104                                             \'left: \' + currentLeft + \'px;\' +
105                                             \'margin: 0;\' +
106                                             \'padding: 0;\' +
107                                             \'width: \' + gridWidth + \'px;\' +
108                                             \'height: \' + gridHeight + \'px;\' +
109                                             \'opacity:\' + settings.opacity + \';\' +
110                                             \'background: url(\'+ img.src + \');\' +
111                                             \'background-size: \' + imgWidth + \'px \' + imgHeight + \'px;\' +
112                                             \'background-position: -\' + currentLeft + \'px -\' + currentTop + \'px;\';
113                 if (currentLeft < (imgWidth - gridWidth)) {
114                     currentLeft += gridWidth;
115                 } else {
116                     currentLeft = 0;
117                     currentTop += gridHeight;
118                 }
119                 fragment.appendChild(spanNode);
120                 gridArr.push(i);
121             }
122             this.gridArr = gridArr;
123             doc.getElementById(\'grid_area\').appendChild(fragment);
124         },
125 
126         // 渐显、渐隐
127         _fade: function() {
128             var gridArr = this.gridArr,
129                 cloneArr = gridArr.slice(0),
以上是关于原生js实现图片网格式渐显渐隐效果的主要内容，如果未能解决你的问题，请参考以下文章 
 unity3d 场景切换 时的渐隐渐显效果是怎么实现的啊！！
 js动画效果代码方法
 前端模拟手机屏幕图片渐隐渐现效果实现
 开发中经常用到的特效效果
 开发中经常用到的特效效果
 zepto与jquery使用语法的区别