Javascript:繼續改進XMosaic.js

XMosaic.js是一個用來實現馬賽克圖片轉場效果的JS類。剛又加了一種效果。

調用方式如下：

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

當然也可以不用變數來儲存他。不過用變數儲存之後就可以用msk.Next()和msk.Prev()來跳到下一張或上一張（類本身沒有上下跳轉的參數傳遞），可以很方便的擴充。

試試在文章內直接插入樣本：

• 1
• 2
• 3
• 4

例子插入成功，不過真心累，而且有變形，但不管了。

更多效果見上一篇文章的樣本頁了。下面基本是廢話。

本來XMosaic.js支援8種基本轉場效果，第7和第8分別是變化美分塊的寬度和高度，但我總覺得不好看。後來看國外的類似功能的JQ外掛程式的效果，發現他們都是同時變更了寬度與高度，而不是只變其中一項。

所以我決定給XMosaic.js也加上同時變更寬度和高度的效果。本來已經有單獨變化寬度或者高度的效果，理論上實現同時變化應該沒問題。

不過做起來發現卻不容易。因為以前都是只變一個屬性的，總是left,top,width,height的一種。而如果要同時變兩個（或者更多），那參數的形式就得變成數組。

而且，由於每個小分塊的寬度幾乎不會等於它的高度，所以寬度變化與高度變化的終點值是不一樣的。

改來改去，最終我用了一個蹩腳的方法實現。

上面說的這個新轉場效果，讓how參數加1位，變成9吧。XMosaic.js的how參數，0-4時是變化left或top,5-8時是變化width或height.但是現在如果給他傳一個9，怎麼處理？

其實他變化哪個屬性，我是用how%2這樣來判斷的，所以9%2與7%2的結果是一樣的，也就是說會變化寬度。

所以我乾脆直接在變化的時候判斷how是否等於9，如果等於的話就順便變化一下分塊的高度。

不過這樣一來，即使how不等於9，動畫也會每次都去判斷一下，造成了效率上的拖延。