JavaScript mosaic mask Picture Toggle Effect: xmosaic.js (GO)

The freshly-baked javascript image switch effect is achieved by a mosaic mask switch. In Flash, a good implementation of mask animation is very simple, but JS implementation of some difficulties.
Xmosaic.js, like Xscroll.js and Xscroll2.js, are JavaScript classes used to make a single image switch effect, but So far the xmosaic.js implementation of the special effects is the most dazzling, dazzle to me after a long period of time will not have to write the picture switch class.

Xmosaic.js, mosaic picture switch Effect Example page

See the sample page source code for the Xmosaic.js usage method. The HTML structure is the same as the HTML structure of the general picture switch, such as:

<div id= "JsF" ><a href= "http://fanweihui3.blog.163.com/blog/#" title= "></a><a href=" http://fanweihui3.blog.163.com/blog/# "title=" "></a><a href=" http://fanweihui3.blog.163.com/blog/# "title=" "></a><a href=" http://fanweihui3.blog.163.com/blog/# "title=" "></a></div>

At this point, you only need the following this sentence JS, you can achieve the mosaic switch effect:

var MSK = xmosaic (' JsF ');

Or, you want to customize the parameters:

1 var msk = Xmosaic (' JsF ', {pager: ' pager ', delay:3000,countx:10,county:1,how:2,order:0});

Xmosaic.js parameter Description:

1. How: Specify toggle effects, default 0
2. Countx: Specifies the number of tiles in the horizontal direction, default 5
3. County: Specifies the number of tiles in the vertical direction, default 1
4. Order: The animation execution sequence of each tile, default 0
5. Delay: Pause time, default 4000
6. Pager: ID of page block, default None
7. Event: Events that trigger page number switching, default MouseOver
8. Auto: Auto Toggle, Default True

Xmosaic.js Feature Description:

Say in front:
Xmosaic.js supports horizontal and vertical cuts, but does not support skew--if all browsers support CSS3, I will implement

Xmosaic.js effects are only available for images-because the images can be divided, and if you need to make additional changes to the text, you should define them separately.

1, how parameter

How is the specified transition effect, so far there are 9 kinds. The effect here is for each small chunk.
Default 0, is to fade in (gradually appear), all the effects behind the fade effect, 1, from left to right slide out and take 0;2, from top to bottom, 3, from right to left, 4, from bottom to top, 5, cross insertion, 6, upper and lower cross insertion, 7, width increased from 0 to 100%, 8, height from 0 to 100%

2,Countx and county

The two parameters specify the number of blocks on the x-axis and the y-axis, and the total count is countx*county. When the How parameter is constant, only changing the value of the countx,county can result in a seemingly different effect. So, the effect of xmosaic.js is not just the number of rules.

Must NOTE: your picture width and height, to be able to be divisible by Countx and county respectively !! Otherwise, there will be dislocation problems in the block.
In my example page, the x-axis and the y-axis can be up to 10 blocks, and the total number of blocks is the 10*10=100 block. Animation execution is still not a problem, but efficiency is not considered.

3,order

The meaning of this parameter is Order. Default 0, which executes from the first chunk to the last
If order is 1, it is executed from the last to the first, 2, from the middle to the end, 3, from the two to the center, 4, Random, 5, all simultaneously.
The order parameter, combined with the how parameter, can increase the number of effects by 6 times times!

Download:
Baidu Cloud Disk

JavaScript mosaic mask Picture Toggle Effect: xmosaic.js (GO)