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

新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换。

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

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

Github地址

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参数说明:

  1. how:指定切换特效,默认0
  2. countX:指定水平方向上的分块个数,默认5
  3. countY:指定垂直方向上的分块个数,默认1
  4. order:各分块的动画执行顺序,默认0
  5. delay:暂停时间,默认4000
  6. pager:页码块的ID,默认无
  7. event:触发页码切换的事件,默认mouseover
  8. 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倍!

6 评论

  1. 不好意思,图片的数量是不是只能有4个,当少于或多于4个时,列表小图标不是相应的个数。图片的个数不是JS获得的么?

      1. @十年灯,
        我明白,但是我HTML里的个数并不与标签栏里的个数相对应。所以才会问你是不是JS读取个数

发表评论

电子邮件地址不会被公开。