JS怎么實(shí)現(xiàn)圖片網(wǎng)格式漸顯、漸隱效果
小編給大家分享一下JS怎么實(shí)現(xiàn)圖片網(wǎng)格式漸顯、漸隱效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)公司2013年至今，先為文成等服務(wù)建站，文成等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為文成企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
js有什么特點(diǎn)
1、js屬于一種解釋性腳本語(yǔ)言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺(tái)下運(yùn)行，擁有著跨平臺(tái)特性；3、js屬于一種弱類型腳本語(yǔ)言，對(duì)使用的數(shù)據(jù)類型未做出嚴(yán)格的要求，能夠進(jìn)行類型轉(zhuǎn)換，簡(jiǎn)單又容易上手；4、js語(yǔ)言安全性高，只能通過(guò)瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對(duì)象的腳本語(yǔ)言，js不僅可以創(chuàng)建對(duì)象，也能使用現(xiàn)有的對(duì)象。
先給出效果圖：
寫的小組件支持圖片的漸顯、漸隱，并且可以是有序、隨機(jī)兩種方式。
我采用的原型是屬性寫在構(gòu)造函數(shù)內(nèi)，方法寫在原型對(duì)象內(nèi)。方法寫構(gòu)造函數(shù)內(nèi)有個(gè)問(wèn)題，就是每次調(diào)用這個(gè)方法就相當(dāng)于重新實(shí)例化一次，舉個(gè)粟子：
實(shí)現(xiàn)網(wǎng)格效果的原理上是將讀取圖片的寬高，按照設(shè)定的參數(shù)，分成等高寬的網(wǎng)格（我用的span標(biāo)簽表示的網(wǎng)格），網(wǎng)格利用定位鋪滿整個(gè)圖片，每個(gè)網(wǎng)格的背景圖都是原圖片，原理同sprite，利用background-position屬性改變顯示區(qū)域。接下來(lái)就是按照設(shè)定的順序?qū)崿F(xiàn)漸顯或漸隱。漸顯或漸隱用的是JS的animation屬性和CSS3的animation屬性在屬性值上有所區(qū)別，這次使用也才知道JS的animation屬性里有個(gè)animationFillMode（規(guī)定當(dāng)動(dòng)畫不播放時(shí)（當(dāng)動(dòng)畫完成時(shí)，或當(dāng)動(dòng)畫有一個(gè)延遲未開始播放時(shí)），要應(yīng)用到元素的樣式。）屬性值。
我綁定的事件是點(diǎn)擊，完全可以用其他事件或頁(yè)面加載觸發(fā)。我的代碼稍加改動(dòng)就可以實(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ā)生動(dòng)作的網(wǎng)格數(shù)，目前只支持1
complete: function() { // 事件完成時(shí)的回調(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, // 每個(gè)網(wǎng)格寬度
gridHeight = imgHeight / cell, // 每個(gè)網(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('配置錯(cuò)誤！');
}
},
_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)格式漸顯、漸隱效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)站題目：JS怎么實(shí)現(xiàn)圖片網(wǎng)格式漸顯、漸隱效果
路徑分享：http://aaarwkj.com/article26/igsocg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、關(guān)鍵詞優(yōu)化、網(wǎng)站導(dǎo)航、搜索引擎優(yōu)化、企業(yè)建站、虛擬主機(jī)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 成都網(wǎng)站設(shè)計(jì)淺析做外貿(mào)網(wǎng)站建設(shè)必需考慮的4大因素？ 2016-10-05
- 如何做外貿(mào)網(wǎng)站建設(shè)才能吸引流量？ 2022-12-07
- 關(guān)于外貿(mào)網(wǎng)站建設(shè)怎樣打造優(yōu)質(zhì)外貿(mào)網(wǎng)站 2013-11-17
- 外貿(mào)網(wǎng)站建設(shè)的戰(zhàn)略 2016-03-13
- 如何提高外貿(mào)網(wǎng)站建設(shè)的權(quán)重？創(chuàng)新互聯(lián)有高招 2014-07-09
- 如何打造高質(zhì)量的外貿(mào)網(wǎng)站建設(shè)？ 2022-06-07
- 你對(duì)外貿(mào)網(wǎng)站建設(shè)了解多少？ 2022-12-10
- 外貿(mào)網(wǎng)站建設(shè)這幾項(xiàng)必須注意 2021-01-05
- 廣州市外貿(mào)網(wǎng)站建設(shè)的作用主要有哪些？ 2022-12-29
- 如何做好外貿(mào)網(wǎng)站建設(shè)提高用戶瀏覽量呢？ 2013-06-20
- 外貿(mào)網(wǎng)站建設(shè)我們需要注意什么呢？ 2022-06-17
- 英文外貿(mào)網(wǎng)站建設(shè)解決方案 2023-02-07