萬惡的馬賽克來啦！！javascript 馬賽克遮罩圖片投影片切換類

新鮮出爐的javascript圖片切換特效，實現的是馬賽克遮罩切換，這個馬賽克不影響“人類文明進步”。在flash裡，實現遮罩動畫很簡單，不過JS實現起來就有些困難了。

XMosaic.js，與XScroll.js和XScroll2.js一樣，都是用來製作單張圖片切換特效的javascript類，不過，迄今為止XMosaic.js實現的特效是最炫的，炫到我以後很長一段時間都不用再寫圖片切換類了。

下面是一個iframe，用來裝樣本頁，免得大家點擊外鏈。注意看樣本頁下面的切換參數功能，可以瀏覽更多特效。預設特效是最簡陋的。

XMosaic.js的使用方法請查看樣本頁原始碼。其中html結構與一般圖片切換的html結構無異，如：

<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，就能實現馬賽克轉場效果：

var msk = XMosaic('jsF');

或者，你想要自訂參數：

var msk = XMosaic('jsF',{pager:'pager',delay:3000,countX:10,countY:1,how:2,order:0 });

XMosaic.js參數說明：

1. how：指定切換特效，預設0
2. countX：指定水平方向上的分塊個數，預設5
3. countY：指定垂直方向上的分塊個數，預設1
4. order：各分塊的動畫執行順序，預設0
5. delay：暫停時間，預設4000
6. pager：頁碼塊的ID，預設無
7. event：觸發頁碼切換的事件，預設mouseover
8. auto：是否自動切換，預設true

XMosaic.js特色說明：

說在前面：

XMosaic.js支援橫向和縱向切塊，但不支援斜著來——如果所有瀏覽器都支援css3的話，我會實現

XMosaic.js的特效只適用於圖片——因為圖片才能分塊；如果你需要對文字進行附加的切換，需另行定義。

1，how參數

how是指定轉場效果的，迄今為止有9種。這裡的效果是針對每個小分塊兒的。

預設0，就是淡入（漸漸顯現），後面的所有效果都帶淡入效果；1，從左至右滑出並帶0；2，從上到下滑出；3，從右至左；4，從下到上；5，左右交叉插入；6，上下交叉插入；7，寬度由0增加到100%；8，高度由0增加到100%

2，countX與countY

這兩個參數分別指定X軸與Y軸上的分塊個數，而總個數count就是countX*countY。在how參數不變的情況下，只改變countX,countY的值，就能得到看起來截然不同的效果。所以，XMosaic.js的效果可不只是how規定的個數。

必須注意：你的圖片寬度及高度，要能被countX和countY分別整除！！不然分塊就會出現錯位問題

我的樣本頁裡面，X軸與Y軸上都最多能分成10塊，那總塊數就是10*10=100塊。動畫執行依舊沒問題，不過效率就不敢考慮了。

3，order

這個參數的意思是順序。預設0，即從第一個分塊依次執行到最後一個

如果order是1，則表示從最後一個執行到第一個；2，從中間的依次執行到兩頭；3，從兩頭執行到中間；4，隨機；5，全部同時執行

order參數，與how參數配合起來，特效數量可以增加6倍！

XMosaic.js口水話：

製作馬賽克遮罩轉場效果，首先要解決的就是：怎麼分塊？這個效果網上已經有不少例子，最新的分塊方式，是用N個DIV，每個DIV就是1塊；這些DIV都有同一張background-image,但都具有不同的background-position；然後設定每個DIV的left與top值，把他們組合在一起，看起來就是一張完整的圖片——實際上他是由很多小塊組成的

所以，我在前面強調你的圖片寬度及高度，要能被countX和countY分別整除；不然各塊之間分贓不均，就糗了。

迴圈輸出每個小塊的left與top值，這也是一個技術活，寫XMosaic的時候，我想了半天，最後還是參考現成的例子寫了。原理很簡單，一點就通，但關鍵的問題是，沒人點你還就真的想不通了。具體可查看XMosaic.js的源碼。

然後就是最重要的問題：如何讓分塊們依次執行一段動畫？

如果讓寫一個一張圖片漸漸顯現的動畫效果，我完全沒問題。但這些分塊們，比如總共10個分塊，他們的透明度要依次從0增加到100，要考慮的問題太多了。

首先，卡不卡？同時操作10個分塊，無疑對電腦效能是個考驗。但如果別人寫的馬賽克轉場效果都不卡而我的卡，那隻能說明我寫錯了。

其次，不能同時執行。如果這10個分塊的透明度同時變化，那和一個分塊就沒什麼區別了。這一點貌似很好解決，設定一個時間遞增的定時器即可。

再次，動畫過程能不能打斷？比如，動畫正進行到一半，此時我通過點擊頁碼觸發下一次切換，那麼現在執行到一半的動畫怎麼辦？

最後，如果我並不想每個分塊依次執行動畫呢？我要隨機呢？

考慮到上面這些問題，我決定把動畫函數綁定到每個分塊上。這樣，每個塊的動畫都是獨立的，可以隨意打斷，而且，不會影響到其他的塊。

比如某一塊叫elm，那麼我就給他綁一個動畫elm.todo=function(){…}。。調用的時候就是elm.todo()。當然，不會這樣直接調用，而是通過setTimeout來調。

同樣，這個塊的動畫定時器也儲存在他自己身上，如elm.timer = setTimeout();清除的時候才不容易混淆。

在這裡我還要介紹一個新版javascript添加的函數,Array.map，是一個添加到數組上的方法，Array.map的作用就是，讓數組內的所有元素都分別執行一個函數——沒錯！對我的XMosaic太有用了。但問題是IE什麼的不支援這個新方法，於是，就只有類比了一個：

map:function(arr,fun,thisr){        for(var i=0,l=arr.length;i<l;i++){            fun.call(thisr,arr[i],i,arr)        }    }

這個其實是照挖cloudgamer裡面的一段代碼，真的很好用。大家可以看看這個代碼試試理解，我理解了很久。。。

另外就是，關於order這個參數了。這個參數難到了我，因為，預設的就一個順序，就是從第一個塊執行到最後一個塊。我還想要倒序，還想要隨機。於是我額外寫了一個函數，changeI().目的就是改變i,然後用基礎速度乘以這個i，得到真正的動畫速度。

—————————————完了——————————

完成XMosaic.js，最大的成就就是學到了map方法，然後對js的定時器有了更深的瞭解，再次是各小塊兒的定位計算方法，

原文發佈於：http://www.jo2.org/archives/330.htm