原生JS實現圖片網格式漸顯、漸隱效果
更新時間：2017年06月05日 09:09:20 作者：悠悠洛
這篇文章主要介紹了原生JS實現圖片網格式漸顯、漸隱效果,需要的朋友可以參考下
先給出效果圖：
寫的小組件支持圖片的漸顯、漸隱，并且可以是有序、隨機兩種方式。
我采用的原型是屬性寫在構造函數內，方法寫在原型對象內。方法寫構造函數內有個問題，就是每次調用這個方法就相當于重新實例化一次，舉個粟子：
實現網格效果的原理上是將讀取圖片的寬高，按照設定的參數，分成等高寬的網格（我用的span標簽表示的網格），網格利用定位鋪滿整個圖片，每個網格的背景圖都是原圖片，原理同sprite，利用background-position屬性改變顯示區(qū)域。接下來就是按照設定的順序實現漸顯或漸隱。漸顯或漸隱用的是JS的animation屬性和CSS3的animation屬性在屬性值上有所區(qū)別，這次使用也才知道JS的animation屬性里有個animationFillMode（規(guī)定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。）屬性值。
我綁定的事件是點擊，完全可以用其他事件或頁面加載觸發(fā)。我的代碼稍加改動就可以實現網格式輪播圖。
下面給出源代碼：
<!doctype html>
<head>
<title>網格效果</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, // 行、列數量
'mode': 'fadeout', // 備選參數: fadeout, fadein
'sort': 'random', // 備選參數: inturn, random
'num': 1, // 每次發(fā)生動作的網格數，目前只支持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實現圖片網格式漸顯、漸隱效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要為大家詳細介紹了JS實現簡易留言板增刪功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要給大家介紹了關于js中join()方法的相關資料,join方法用于把數組中的所有元素放入一個字符串,文中通過代碼以及圖文介紹的非常詳細,需要的朋友可以參考下2023-10-10
最近項目中遇到了一些功能需要與原生進行混合開發(fā),所以下面這篇文章主要給大家介紹了關于uni-app和原生小程序混合開發(fā)的具體實現過程,需要的朋友可以參考下2022-07-07
JavaScript Event學習第五章 高級事件注冊模型
在這一章我會講解兩種高級時間注冊模型：W3C和微軟的。因為這兩個方法都不能跨瀏覽器，所以在現在看來他們的使用場合并不多。2010-02-02
本文給大家分享的是使用javascript實現身份驗證的規(guī)則以及代碼，非常的簡單實用，有需要的小伙伴可以參考下。2016-02-02
javascript小游戲實現代碼，喜歡用javascript實現游戲效果代碼的朋友可以參考下。2010-08-08
Javascript的表單驗證-揭開正則表達式的面紗在本文重點介紹，感興趣的朋友一起學習吧2016-03-03
這篇文章主要通過動畫的示例來為大家詳細介紹一下JavaScript的函數封裝，文中的示例代碼講解詳細，感興趣的小伙伴可以學習一下2022-03-03
這篇文章主要介紹了JavaScript構建自己的對象,結合實例形式分析了javascript自定義類的定義與對象的實例化相關操作技巧,需要的朋友可以參考下2016-11-11
js彈出模式對話框,并接收回傳值的方法，需要的朋友可以參考一下2013-03-03