javascript马赛克遮罩图片切换效果:XMosaic.js(转)

新鲜出炉的javascript图片切换特效，实现的是马赛克遮罩切换。在flash里，好实现遮罩动画很简单，不过JS实现起来就有些困难了。
XMosaic.js，与XScroll.js和XScroll2.js一样，都是用来制作单张图片切换特效的javascript类，不过，迄今为止XMosaic.js实现的特效是最炫的，炫到我以后很长一段时间都不用再写图片切换类了。

XMosaic.js，马赛克图片切换特效示例页

XMosaic.js的使用方法请查看示例页源代码。其中html结构与一般图片切换的html结构无异，如：

 <div id="jsF">

 <a href="http://fanweihui3.blog.163.com/blog/#" title=""><img src="http://fanweihui3.blog.163.com/blog/../s1.jpg" alt="" /></a>

 <a href="http://fanweihui3.blog.163.com/blog/#" title=""><img src="http://fanweihui3.blog.163.com/blog/../s2.jpg" alt="" /></a>

 <a href="http://fanweihui3.blog.163.com/blog/#" title=""><img src="http://fanweihui3.blog.163.com/blog/../s3.jpg" alt="" /></a>

 <a href="http://fanweihui3.blog.163.com/blog/#" title=""><img src="http://fanweihui3.blog.163.com/blog/../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倍！

下载：
百度云盘

原文链接：http://jo2.org/javascript%E9%A9%AC%E8%B5%9B%E5%85%8B%E9%81%AE%E7%BD%A9%E5%9B%BE%E7%89%87%E5%88%87%E6%8D%A2%E6%95%88%E6%9E%9Cxmosaic-js/