原生JS實現(xiàn)圖片網(wǎng)格式漸顯、漸隱效果
更新時間：2017年06月05日 09:09:20 作者：悠悠洛
這篇文章主要介紹了原生JS實現(xiàn)圖片網(wǎng)格式漸顯、漸隱效果,需要的朋友可以參考下
先給出效果圖：
寫的小組件支持圖片的漸顯、漸隱，并且可以是有序、隨機兩種方式。
我采用的原型是屬性寫在構(gòu)造函數(shù)內(nèi)，方法寫在原型對象內(nèi)。方法寫構(gòu)造函數(shù)內(nèi)有個問題，就是每次調(diào)用這個方法就相當于重新實例化一次，舉個粟子：
實現(xiàn)網(wǎng)格效果的原理上是將讀取圖片的寬高，按照設(shè)定的參數(shù)，分成等高寬的網(wǎng)格（我用的span標簽表示的網(wǎng)格），網(wǎng)格利用定位鋪滿整個圖片，每個網(wǎng)格的背景圖都是原圖片，原理同sprite，利用background-position屬性改變顯示區(qū)域。接下來就是按照設(shè)定的順序?qū)崿F(xiàn)漸顯或漸隱。漸顯或漸隱用的是JS的animation屬性和CSS3的animation屬性在屬性值上有所區(qū)別，這次使用也才知道JS的animation屬性里有個animationFillMode（規(guī)定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。）屬性值。
我綁定的事件是點擊，完全可以用其他事件或頁面加載觸發(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') {
// 隨機漸隱
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實現(xiàn)圖片網(wǎng)格式漸顯、漸隱效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
本文介紹的方法基于javascript，css和myFunction結(jié)合可實現(xiàn)頁面展示轉(zhuǎn)換，下面有個示例，大家可以參考下2014-07-07
微信小程序前端通過weixin://wxpay/bizpayurl生成支付二維碼全過程
這篇文章主要給大家介紹了關(guān)于微信小程序前端通過weixin://wxpay/bizpayurl生成支付二維碼的相關(guān)資料,weixin://wxpay/bizpayurl 是一個微信支付的鏈接地址,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了js基于cookie記錄來賓姓名的方法,涉及javascript使用cookie針對方可信息的存儲與讀取顯示相關(guān)技巧,需要的朋友可以參考下2016-07-07
這是個人在最近使用json時做的總結(jié)，拿出來給沒接觸過的小弟們曬曬，適用與沒接觸過json的人員，其中json2。js請到j(luò)son官網(wǎng)下載。2010-03-03
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
本文主要給大家詳細介紹Angular和Nodejs、socket.io的使用，以及如何使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室，需要的朋友可以來參考下2015-08-08
這篇文章主要介紹了JavaScript設(shè)計模式學習之“類式繼承”,本文直接用代碼實例講解類式繼承的實現(xiàn)方法,需要的朋友可以參考下2015-03-03
Javascript 模擬mvc實現(xiàn)點餐程序案例詳解
這篇文章主要介紹了Javascript 模擬mvc實現(xiàn)點餐程序案例詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
這篇文章主要為大家詳細介紹了Bootstrap表單的基礎(chǔ)知識，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
下面小編就為大家?guī)硪黄狫S限定手機版中圖片大小隨分辨率自動調(diào)整的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
這篇文章主要給大家介紹了js簡單粗暴的發(fā)布訂閱的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01