JavaScript馬賽克遮罩圖片幻燈片切換類
新鮮出爐的javascript圖片切換特效，實(shí)現(xiàn)的是馬賽克遮罩切換，這個(gè)馬賽克不影響“人類文明進(jìn)步”。在flash里，實(shí)現(xiàn)遮罩動(dòng)畫很簡(jiǎn)單，不過JS實(shí)現(xiàn)起來就有些困難了。
XMosaic.js，與XScroll.js和XScroll2.js一樣，都是用來制作單張圖片切換特效的javascript類，不過，迄今為止XMosaic.js實(shí)現(xiàn)的特效是最炫的，炫到我以后很長(zhǎng)一段時(shí)間都不用再寫圖片切換類了。
下面是一個(gè)iframe，用來裝示例頁(yè)，免得大家點(diǎn)擊外鏈。注意看示例頁(yè)下面的切換參數(shù)功能，可以瀏覽更多特效。默認(rèn)特效是最簡(jiǎn)陋的。
XMosaic.js的使用方法請(qǐng)查看示例頁(yè)源代碼。其中html結(jié)構(gòu)與一般圖片切換的html結(jié)構(gòu)無異，如：
- <div id="jsF">
- <a href="#" title=""><img src="../s1.jpg" alt="" /></a>
- <a href="#" title=""><img src="../s2.jpg" alt="" /></a>
- <a href="#" title=""><img src="../s3.jpg" alt="" /></a>
- <a href="#" title=""><img src="../s4.jpg" alt="" /></a>
- </div>
此時(shí)，你只需要以下這句js，就能實(shí)現(xiàn)馬賽克切換效果：
- var msk = XMosaic('jsF');
或者，你想要自定義參數(shù)：
- var msk = XMosaic('jsF',{pager:'pager',delay:3000,countX:10,countY:1,how:2,order:0 });
XMosaic.js參數(shù)說明：
how：指定切換特效，默認(rèn)0
countX：指定水平方向上的分塊個(gè)數(shù)，默認(rèn)5
countY：指定垂直方向上的分塊個(gè)數(shù)，默認(rèn)1
order：各分塊的動(dòng)畫執(zhí)行順序，默認(rèn)0
delay：暫停時(shí)間，默認(rèn)4000
pager：頁(yè)碼塊的ID，默認(rèn)無
event：觸發(fā)頁(yè)碼切換的事件，默認(rèn)mouseover
auto：是否自動(dòng)切換，默認(rèn)true
XMosaic.js特色說明：
說在前面：
XMosaic.js支持橫向和縱向切塊，但不支持斜著來——如果所有瀏覽器都支持css3的話，我會(huì)實(shí)現(xiàn)。
XMosaic.js的特效只適用于圖片——因?yàn)閳D片才能分塊；如果你需要對(duì)文字進(jìn)行附加的切換，需另行定義。
1，how參數(shù)
how是指定切換效果的，迄今為止有9種。這里的效果是針對(duì)每個(gè)小分塊兒的。
默認(rèn)0，就是淡入（漸漸顯現(xiàn)），后面的所有效果都帶淡入效果；1，從左到右滑出并帶0；2，從上到下滑出；3，從右到左；4，從下到上；5，左右交叉插入；6，上下交叉插入；7，寬度由0增加到100%；8，高度由0增加到100%
2，countX與countY
這兩個(gè)參數(shù)分別指定X軸與Y軸上的分塊個(gè)數(shù)，而總個(gè)數(shù)count就是countX*countY。在how參數(shù)不變的情況下，只改變countX,countY的值，就能得到看起來截然不同的效果。所以，XMosaic.js的效果可不只是how規(guī)定的個(gè)數(shù)。
必須注意：你的圖片寬度及高度，要能被countX和countY分別整除！！不然分塊就會(huì)出現(xiàn)錯(cuò)位問題
我的示例頁(yè)里面，X軸與Y軸上都最多能分成10塊，那總塊數(shù)就是10*10=100塊。動(dòng)畫執(zhí)行依舊沒問題，不過效率就不敢考慮了。
3，order
這個(gè)參數(shù)的意思是順序。默認(rèn)0，即從第一個(gè)分塊依次執(zhí)行到最后一個(gè)
如果order是1，則表示從最后一個(gè)執(zhí)行到第一個(gè)；2，從中間的依次執(zhí)行到兩頭；3，從兩頭執(zhí)行到中間；4，隨機(jī)；5，全部同時(shí)執(zhí)行
order參數(shù)，與how參數(shù)配合起來，特效數(shù)量可以增加6倍！
XMosaic.js口水話：
制作馬賽克遮罩切換效果，首先要解決的就是：怎么分塊？這個(gè)效果網(wǎng)上已經(jīng)有不少例子，最新的分塊方式，是用N個(gè)DIV，每個(gè)DIV就是1塊；這些DIV都有同一張background-image,但都具有不同的background-position；然后設(shè)置每個(gè)DIV的left與top值，把他們組合在一起，看起來就是一張完整的圖片——實(shí)際上他是由很多小塊組成的
所以，我在前面強(qiáng)調(diào)你的圖片寬度及高度，要能被countX和countY分別整除；不然各塊之間分贓不均，就糗了。
循環(huán)輸出每個(gè)小塊的left與top值，這也是一個(gè)技術(shù)活，寫XMosaic的時(shí)候，我想了半天，最后還是參考現(xiàn)成的例子寫了。原理很簡(jiǎn)單，一點(diǎn)就通，但關(guān)鍵的問題是，沒人點(diǎn)你還就真的想不通了。具體可查看XMosaic.js的源碼。
然后就是最重要的問題：如何讓分塊們依次執(zhí)行一段動(dòng)畫？
如果讓寫一個(gè)一張圖片漸漸顯現(xiàn)的動(dòng)畫效果，我完全沒問題。但這些分塊們，比如總共10個(gè)分塊，他們的透明度要依次從0增加到100，要考慮的問題太多了。
首先，卡不卡？同時(shí)操作10個(gè)分塊，無疑對(duì)電腦性能是個(gè)考驗(yàn)。但如果別人寫的馬賽克切換效果都不卡而我的卡，那只能說明我寫錯(cuò)了。
其次，不能同時(shí)執(zhí)行。如果這10個(gè)分塊的透明度同時(shí)變化，那和一個(gè)分塊就沒什么區(qū)別了。這一點(diǎn)貌似很好解決，設(shè)置一個(gè)時(shí)間遞增的定時(shí)器即可。
再次，動(dòng)畫過程能不能打斷？比如，動(dòng)畫正進(jìn)行到一半，此時(shí)我通過點(diǎn)擊頁(yè)碼觸發(fā)下一次切換，那么現(xiàn)在執(zhí)行到一半的動(dòng)畫怎么辦？
最后，如果我并不想每個(gè)分塊依次執(zhí)行動(dòng)畫呢？我要隨機(jī)呢？
考慮到上面這些問題，我決定把動(dòng)畫函數(shù)綁定到每個(gè)分塊上。這樣，每個(gè)塊的動(dòng)畫都是獨(dú)立的，可以隨意打斷，而且，不會(huì)影響到其他的塊。
比如某一塊叫elm，那么我就給他綁一個(gè)動(dòng)畫elm.todo=function(){…}。。調(diào)用的時(shí)候就是elm.todo()。當(dāng)然，不會(huì)這樣直接調(diào)用，而是通過setTimeout來調(diào)。
同樣，這個(gè)塊的動(dòng)畫定時(shí)器也保存在他自己身上，如elm.timer = setTimeout();清除的時(shí)候才不容易混淆。
在這里我還要介紹一個(gè)新版javascript添加的函數(shù),Array.map，是一個(gè)添加到數(shù)組上的方法，Array.map的作用就是，讓數(shù)組內(nèi)的所有元素都分別執(zhí)行一個(gè)函數(shù)——沒錯(cuò)！對(duì)我的XMosaic太有用了。但問題是IE什么的不支持這個(gè)新方法，于是，就只有模擬了一個(gè)：
- map:function(arr,fun,thisr){
- for(var i=0,l=arr.length;i<l;i++){
- fun.call(thisr,arr[i],i,arr)
- }
- }
這個(gè)其實(shí)是照挖cloudgamer里面的一段代碼，真的很好用。大家可以看看這個(gè)代碼試試?yán)斫猓依斫饬撕芫谩！！?/p>
另外就是，關(guān)于order這個(gè)參數(shù)了。這個(gè)參數(shù)難到了我，因?yàn)椋J(rèn)的就一個(gè)順序，就是從第一個(gè)塊執(zhí)行到最后一個(gè)塊。我還想要倒序，還想要隨機(jī)。于是我額外寫了一個(gè)函數(shù)，changeI().目的就是改變i,然后用基礎(chǔ)速度乘以這個(gè)i，得到真正的動(dòng)畫速度。
效果請(qǐng)進(jìn)原文觀看
原文鏈接：http://www.cnblogs.com/lixlib/archive/2012/05/02/javascript-xmosaic.html
【編輯推薦】
- 網(wǎng)易郵箱前端JavaScript編碼規(guī)范
- 對(duì)開發(fā)者非常有用的JavaScript庫(kù)
- JavaScript寫法你更偏向哪個(gè)
- js大項(xiàng)目代碼的多人合作處理方法
- 看JavaScript如何實(shí)現(xiàn)頁(yè)面自適
