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，动画也会每次都去判断一下，造成了效率上的拖延。