JavaScript马赛克遮罩图片幻灯片切换类

开发 前端
XMosaic.js,与XScroll.js和XScroll2.js一样,都是用来制作单张图片切换特效的javascript类,不过,迄今为止XMosaic.js实现的特效是最炫的,炫到我以后很长一段时间都不用再写图片切换类了。

新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换,这个马赛克不影响“人类文明进步”。在flash里,实现遮罩动画很简单,不过JS实现起来就有些困难了。

XMosaic.js,与XScroll.jsXScroll2.js一样,都是用来制作单张图片切换特效的javascript类,不过,迄今为止XMosaic.js实现的特效是最炫的,炫到我以后很长一段时间都不用再写图片切换类了。

下面是一个iframe,用来装示例页,免得大家点击外链。注意看示例页下面的切换参数功能,可以浏览更多特效。默认特效是最简陋的。

[[76447]]

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

  1. <div id="jsF"> 
  2. <a href="#" title=""><img src="../s1.jpg" alt="" /></a> 
  3. <a href="#" title=""><img src="../s2.jpg" alt="" /></a> 
  4. <a href="#" title=""><img src="../s3.jpg" alt="" /></a> 
  5. <a href="#" title=""><img src="../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倍!

XMosaic.js口水话:

制作马赛克遮罩切换效果,首先要解决的就是:怎么分块?这个效果网上已经有不少例子,最新的分块方式,是用N个DIV,每个DIV就是1块;这些DIV都有同一张background-image,但都具有不同的background-position;然后设置每个DIV的left与top值,把他们组合在一起,看起来就是一张完整的图片——实际上他是由很多小块组成的

所以,我在前面强调你的图片宽度及高度,要能被countX和countY分别整除;不然各块之间分赃不均,就糗了。

循环输出每个小块的left与top值,这也是一个技术活,写XMosaic的时候,我想了半天,最后还是参考现成的例子写了。原理很简单,一点就通,但关键的问题是,没人点你还就真的想不通了。具体可查看XMosaic.js的源码。

然后就是最重要的问题:如何让分块们依次执行一段动画?

如果让写一个一张图片渐渐显现的动画效果,我完全没问题。但这些分块们,比如总共10个分块,他们的透明度要依次从0增加到100,要考虑的问题太多了。

首先,卡不卡?同时操作10个分块,无疑对电脑性能是个考验。但如果别人写的马赛克切换效果都不卡而我的卡,那只能说明我写错了。

其次,不能同时执行。如果这10个分块的透明度同时变化,那和一个分块就没什么区别了。这一点貌似很好解决,设置一个时间递增的定时器即可。

再次,动画过程能不能打断?比如,动画正进行到一半,此时我通过点击页码触发下一次切换,那么现在执行到一半的动画怎么办?

最后,如果我并不想每个分块依次执行动画呢?我要随机呢?

考虑到上面这些问题,我决定把动画函数绑定到每个分块上。这样,每个块的动画都是独立的,可以随意打断,而且,不会影响到其他的块。

比如某一块叫elm,那么我就给他绑一个动画elm.todo=function(){…}。。调用的时候就是elm.todo()。当然,不会这样直接调用,而是通过setTimeout来调。

同样,这个块的动画定时器也保存在他自己身上,如elm.timer = setTimeout();清除的时候才不容易混淆。

在这里我还要介绍一个新版javascript添加的函数,Array.map,是一个添加到数组上的方法,Array.map的作用就是,让数组内的所有元素都分别执行一个函数——没错!对我的XMosaic太有用了。但问题是IE什么的不支持这个新方法,于是,就只有模拟了一个:

  1. map:function(arr,fun,thisr){  
  2.         for(var i=0,l=arr.length;i<l;i++){  
  3.             fun.call(thisr,arr[i],i,arr)  
  4.         }  
  5.     } 

这个其实是照挖cloudgamer里面的一段代码,真的很好用。大家可以看看这个代码试试理解,我理解了很久。。。

另外就是,关于order这个参数了。这个参数难到了我,因为,默认的就一个顺序,就是从第一个块执行到最后一个块。我还想要倒序,还想要随机。于是我额外写了一个函数,changeI().目的就是改变i,然后用基础速度乘以这个i,得到真正的动画速度。

效果请进原文观看

原文链接:http://www.cnblogs.com/lixlib/archive/2012/05/02/javascript-xmosaic.html

【编辑推荐】

  1. 网易邮箱前端JavaScript编码规范
  2. 对开发者非常有用的JavaScript库
  3. JavaScript写法你更偏向哪个
  4. js大项目代码的多人合作处理方法
  5. 看JavaScript如何实现页面自适

 

责任编辑:张伟 来源: 脚儿网的博客
相关推荐

2013-04-03 11:12:57

Java幻灯片切换

2009-02-09 17:45:12

Impressive播放幻灯片 SourceForg

2009-08-17 13:07:27

C#马赛克算法

2022-09-07 08:37:34

DCGAN图片AI

2020-10-15 06:00:22

LinuxLinux终端幻灯片

2022-12-23 15:50:17

模型图像

2013-06-25 11:21:35

Android开发幻灯片效果Gallery

2018-07-03 08:50:12

人工智能深度学习CNN

2020-12-09 14:18:46

AI 技术马赛克

2015-10-15 17:31:14

微软

2015-04-30 10:29:32

WOC视频会议优化方案深信服

2011-07-13 17:09:34

WPS幻灯片

2021-05-31 10:30:46

密码马赛克工具

2021-02-24 10:19:43

人工智能马赛克

2011-01-21 10:50:59

Windows 8

2014-10-29 11:46:00

2018-09-12 16:30:45

Python编程语言马赛克画

2012-03-16 16:33:35

视频会议马赛克深信服

2011-08-18 15:56:03

深信服广域网优化

2023-11-22 11:20:38

点赞
收藏

51CTO技术栈公众号