原生JS實(shí)現(xiàn)圖片網(wǎng)格式漸顯、漸隱效果
更新時間：2017年06月05日 09:09:20 作者：悠悠洛
這篇文章主要介紹了原生JS實(shí)現(xiàn)圖片網(wǎng)格式漸顯、漸隱效果,需要的朋友可以參考下
先給出效果圖：
寫的小組件支持圖片的漸顯、漸隱，并且可以是有序、隨機(jī)兩種方式。
我采用的原型是屬性寫在構(gòu)造函數(shù)內(nèi)，方法寫在原型對象內(nèi)。方法寫構(gòu)造函數(shù)內(nèi)有個問題，就是每次調(diào)用這個方法就相當(dāng)于重新實(shí)例化一次，舉個粟子：
實(shí)現(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)用到元素的樣式。）屬性值。
我綁定的事件是點(diǎn)擊，完全可以用其他事件或頁面加載觸發(fā)。我的代碼稍加改動就可以實(shí)現(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實(shí)現(xiàn)圖片網(wǎng)格式漸顯、漸隱效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡易留言板增刪功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要給大家介紹了關(guān)于js中join()方法的相關(guān)資料,join方法用于把數(shù)組中的所有元素放入一個字符串,文中通過代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
uni-app和原生小程序混合開發(fā)的具體實(shí)現(xiàn)過程
最近項(xiàng)目中遇到了一些功能需要與原生進(jìn)行混合開發(fā),所以下面這篇文章主要給大家介紹了關(guān)于uni-app和原生小程序混合開發(fā)的具體實(shí)現(xiàn)過程,需要的朋友可以參考下2022-07-07
JavaScript Event學(xué)習(xí)第五章 高級事件注冊模型
在這一章我會講解兩種高級時間注冊模型：W3C和微軟的。因?yàn)檫@兩個方法都不能跨瀏覽器，所以在現(xiàn)在看來他們的使用場合并不多。2010-02-02
JavaScript實(shí)現(xiàn)身份證驗(yàn)證代碼
本文給大家分享的是使用javascript實(shí)現(xiàn)身份驗(yàn)證的規(guī)則以及代碼，非常的簡單實(shí)用，有需要的小伙伴可以參考下。2016-02-02
原創(chuàng)javascript小游戲?qū)崿F(xiàn)代碼
javascript小游戲?qū)崿F(xiàn)代碼，喜歡用javascript實(shí)現(xiàn)游戲效果代碼的朋友可以參考下。2010-08-08
Javascript的表單驗(yàn)證-揭開正則表達(dá)式的面紗
Javascript的表單驗(yàn)證-揭開正則表達(dá)式的面紗在本文重點(diǎn)介紹，感興趣的朋友一起學(xué)習(xí)吧2016-03-03
這篇文章主要通過動畫的示例來為大家詳細(xì)介紹一下JavaScript的函數(shù)封裝，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以學(xué)習(xí)一下2022-03-03
這篇文章主要介紹了JavaScript構(gòu)建自己的對象,結(jié)合實(shí)例形式分析了javascript自定義類的定義與對象的實(shí)例化相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
js彈出模式對話框,并接收回傳值的方法，需要的朋友可以參考一下2013-03-03