新鲜出炉的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参数说明：
how：指定切换特效，默认0
countX：指定水平方向上的分块个数，默认5
countY：指定垂直方向上的分块个数，默认1
order：各分块的动画执行顺序，默认0
delay：暂停时间，默认4000
pager：页码块的ID，默认无
event：触发页码切换的事件，默认mouseover
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，得到真正的动画速度。
效果请进原文观看
原文链接：http://www.cnblogs.com/lixlib/archive/2012/05/02/javascript-xmosaic.html
【编辑推荐】
