先給出效果圖：
寫的小組件支持圖片的漸顯、漸隱，并且可以是有序、隨機(jī)兩種方式。
我采用的原型是屬性寫在構(gòu)造函數(shù)內(nèi)，方法寫在原型對象內(nèi)。方法寫構(gòu)造函數(shù)內(nèi)有個問題，就是每次調(diào)用這個方法就相當(dāng)于重新實例化一次，舉個粟子：
實現(xiàn)網(wǎng)格效果的原理上是將讀取圖片的寬高，按照設(shè)定的參數(shù)，分成等高寬的網(wǎng)格（我用的span標(biāo)簽表示的網(wǎng)格），網(wǎng)格利用定位鋪滿整個圖片，每個網(wǎng)格的背景圖都是原圖片，原理同sprite，利用background-position屬性改變顯示區(qū)域。接下來就是按照設(shè)定的順序?qū)崿F(xiàn)漸顯或漸隱。漸顯或漸隱用的是JS的animation屬性和CSS3的animation屬性在屬性值上有所區(qū)別，這次使用也才知道JS的animation屬性里有個animationFillMode（規(guī)定當(dāng)動畫不播放時（當(dāng)動畫完成時，或當(dāng)動畫有一個延遲未開始播放時），要應(yīng)用到元素的樣式。）屬性值。
我綁定的事件是點擊，完全可以用其他事件或頁面加載觸發(fā)。我的代碼稍加改動就可以實現(xiàn)網(wǎng)格式輪播圖。
下面給出源代碼：
<!doctype html><head><title>網(wǎng)格效果</title><style> @charset "utf-8"; /*css reset*/ 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;} /*css*/ .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, // 行、列數(shù)量 'mode': 'fadeout', // 備選參數(shù): fadeout, fadein 'sort': 'random', // 備選參數(shù): inturn, random 'num': 1, // 每次發(fā)生動作的網(wǎng)格數(shù)，目前只支持1 complete: function() { // 事件完成時的回調(diào)函數(shù) 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, // 構(gòu)建UI _create: function() { var img = this.ele, settings = this.settings, cell = settings.cell, imgWidth = img.width, imgHeight = img.height, gridWidth = imgWidth / cell, // 每個網(wǎng)格寬度 gridHeight = imgHeight / cell, // 每個網(wǎng)格高度 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') { // 隨機(jī)漸隱 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') { // 隨機(jī)漸顯 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實現(xiàn)圖片網(wǎng)格式漸顯、漸隱效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
