新鲜出炉的javascript图片切换特效，实现的是马赛克遮罩切换。在flash里，好实现遮罩动画很简单，不过JS实现起来就有些困难了。
XMosaic.js，与XScroll.js和XScroll2.js一样，都是用来制作单张图片切换特效的javascript类，不过，迄今为止XMosaic.js实现的特效是最炫的，炫到我以后很长一段时间都不用再写图片切换类了。
XMosaic.js的使用方法请查看示例页源代码。其中html结构与一般图片切换的html结构无异，如：
1 <div id="jsF"> 2 <a href="http://fanweihui3.blog.163.com/blog/#" title=""><img src="http://fanweihui3.blog.163.com/blog/../s1.jpg" alt="" /></a> 3 <a href="http://fanweihui3.blog.163.com/blog/#" title=""><img src="http://fanweihui3.blog.163.com/blog/../s2.jpg" alt="" /></a> 4 <a href="http://fanweihui3.blog.163.com/blog/#" title=""><img src="http://fanweihui3.blog.163.com/blog/../s3.jpg" alt="" /></a> 5 <a href="http://fanweihui3.blog.163.com/blog/#" title=""><img src="http://fanweihui3.blog.163.com/blog/../s4.jpg" alt="" /></a> 6 </div>
此时，你只需要以下这句js，就能实现马赛克切换效果：
1 var msk = XMosaic('jsF');
或者，你想要自定义参数：
1 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倍！
下载：
百度云盘