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