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

时间：2021-05-25

先给出效果图：

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

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

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

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

　　下面给出源代码：

<!doctype html><head><title>网格效果</title><style> @charset "utf-8"; html{font-family:"Helvetica Neue",Helvetica,STHeiTi,sans-serif;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;} body{-webkit-overflow-scrolling:touch;margin:0;} ul{margin:0;padding:0;list-style:none;outline:none;} dl,dd{margin:0;} a{display:inline-block;margin:0;padding:0;text-decoration:none;background:transparent;outline:none;color:#000;} a:link,a:visited,a:hover,a:active{text-decoration:none;color:currentColor;} a,dt,dd{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;} img{border:0;} p{margin:0;} input,button,select,textarea{margin:0;padding:0;border:0;outline:0;background-color:transparent;} .origin-pic { display: inline-block; width: 200px; height: 200px; } .grid-area { display: inline-block; position: relative; width: 200px; height: 200px; } .grid { position: absolute; } #img1 { opacity: 1; width: 200px; height: 200px; } @keyframes fadeout{ 0% {opacity: 1} 100% {opacity: 0} } @keyframes fadein{ 0% {opacity: 0} 100% {opacity: 1} }</style></head><body><div> <img class="origin-pic" src="./pic.jpg" /></div><div id="grid_area" class="grid-area"> <img id="img1" src="./pic.jpg" /></div><script>var gridSetting = { 'cell': 10, // 行、列数量 'mode': 'fadeout', // 备选参数: fadeout, fadein 'sort': 'random', // 备选参数: inturn, random 'num': 1, // 每次发生动作的网格数，目前只支持1 complete: function() { // 事件完成时的回调函数 console.log('ok!'); }};var img1 = document.getElementById('img1');(function(doc, setting, ele) { var defaults = { 'speed': 20, }; function Grid(ele) { this.ele = ele; this.settings = Object.assign({}, setting, defaults); } Grid.prototype = { constructor: Grid, // 构建UI _create: function() { var img = this.ele, settings = this.settings, cell = settings.cell, imgWidth = img.width, imgHeight = img.height, gridWidth = imgWidth / cell, // 每个网格宽度 gridHeight = imgHeight / cell, // 每个网格高度 currentTop = 0, currentLeft = 0, fragment = doc.createDocumentFragment(), i = 0, gridArr = []; img.style.display = 'none'; for (; i < cell * cell; i++) { var spanNode = doc.createElement('span'); spanNode.setAttribute('id', i); spanNode.style.cssText += 'position: absolute;' + 'top: ' + currentTop + 'px;' + 'left: ' + currentLeft + 'px;' + 'margin: 0;' + 'padding: 0;' + 'width: ' + gridWidth + 'px;' + 'height: ' + gridHeight + 'px;' + 'opacity:' + settings.opacity + ';' + 'background: url('+ img.src + ');' + 'background-size: ' + imgWidth + 'px ' + imgHeight + 'px;' + 'background-position: -' + currentLeft + 'px -' + currentTop + 'px;'; if (currentLeft < (imgWidth - gridWidth)) { currentLeft += gridWidth; } else { currentLeft = 0; currentTop += gridHeight; } fragment.append(spanNode); gridArr.push(i); } this.gridArr = gridArr; doc.getElementById('grid_area').append(fragment); }, // 渐显、渐隐 _fade: function() { var gridArr = this.gridArr, cloneArr = gridArr.slice(0), length = gridArr.length, settings = this.settings, sort = settings.sort, i = 0; switch(settings.mode) { case 'fadeout': if (sort == 'inturn') { // 按顺序渐隐 var timer = setInterval(function() { doc.getElementById(gridArr[i]).style.animation = "fadeout 1s forwards"; i++; if (i >= settings.cell * settings.cell) { clearInterval(timer); settings.complete(); } }, settings.speed) } else if (sort == 'random') { // 随机渐隐 var timer = setInterval(function() { i = cloneArr.splice(Math.random() * length--, 1); doc.getElementById(gridArr[i]).style.animation = "fadeout 1s forwards"; if (length == 0) { clearInterval(timer); settings.complete(); } }, settings.speed) } break; case 'fadein': if (sort == 'inturn') { // 按顺序渐渐显 var timer = setInterval(function() { doc.getElementById(gridArr[i]).style.animation = "fadein 1s forwards"; i++; if (i >= settings.cell * settings.cell) { clearInterval(timer); settings.complete(); } }, settings.speed) } else if (sort == 'random') { // 随机渐显 var timer = setInterval(function() { i = cloneArr.splice(Math.random() * length--, 1); doc.getElementById(gridArr[i]).style.animation = "fadein 1s forwards"; if (length == 0) { clearInterval(timer); settings.complete(); } }, settings.speed) } break; default: console.log('配置错误！'); } }, _checkMode: function() { if (this.settings.mode == 'fadein') { this.settings.opacity = 0; } else { this.settings.opacity = 1; } }, }; var gridArea = doc.getElementById('grid_area'); gridArea.addEventListener('click', function() { var event = new Grid(ele); event._checkMode(); event._create(); event._fade(); }, false);})(document, gridSetting, img1);</script></body></html>

以上所述是小编给大家介绍的原生JS实现图片网格式渐显、渐隐效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章