首页 > 代码库 > javascript马赛克遮罩图片切换效果:XMosaic.js(转)

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"  /></a><a href="http://fanweihui3.blog.163.com/blog/#" title=""><img src="http://fanweihui3.blog.163.com/blog/../s2.jpg"  /></a><a href="http://fanweihui3.blog.163.com/blog/#" title=""><img src="http://fanweihui3.blog.163.com/blog/../s3.jpg"  /></a><a href="http://fanweihui3.blog.163.com/blog/#" title=""><img src="http://fanweihui3.blog.163.com/blog/../s4.jpg"  /></a></div>

 

此时,你只需要以下这句js,就能实现马赛克切换效果:

 

var msk = XMosaic(‘jsF‘);

 

或者,你想要自定义参数:

 1 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倍!

 

 

下载:
百度云盘

 

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