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