The evil mosaic is coming !! Javascript mosaic mask image slide switching class

The newly released JavaScript image switching effect achieves mosaic mask switching, which does not affect the "progress of human civilization ". In flash, it is very easy to implement the mask animation, but it is difficult to implement JavaScript.

Xmosaic. JS, like xscroll. js and xscroll2.jsLeafletThe javascript class for image switching special effects. However, the special effects implemented by xmosaic. js are the most dazzling so far, so I will not need to write any picture switching classes for a long time.

The following is an IFRAME used to install the sample page, so that you do not need to click the external link. Note:Switch ParametersFunction to view more special effects. Default effects are the simplest.

For how to use xmosaic. JS, see the example Page.Source code. The HTML structure is the same as the HTML structure for general image switching, for example:

 <  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  > 

In this case, you only need the following JavaScript code to achieve mosaic switching:

 
VaRMSK = xmosaic ('jsf ');
 

Or, you want to customize the parameters:

 
VaRMSK = xmosaic ('jsf ', {Pager: 'pager', delay: 3000, countx: 10, county: 1, how: 2, order: 0 });
 

Xmosaic. js parameter description:

1. How: Specifies the switchover effect. The default value is 0.
2. Countx: specifies the number of blocks in the horizontal direction. The default value is 5.
3. County: specifies the number of blocks in the vertical direction. The default value is 1.
4. Order: The animation execution sequence of each part. The default value is 0.
5. Delay: the pause time. The default value is 4000.
6. Pager: the ID of the page number block. It is null by default.
7. Event: the page number switch event. The default value is Mouseover.
8. Auto: whether to automatically switch. The default value is true.

Xmosaic. js features:

Above:

Xmosaic. js supports horizontal and vertical chunks, but does not support skew-if all browsers support css3, I will implement

The special effect of xmosaic. JS is only applicable to images-Because images can be segmented. If you need to switch the text, you need to define it separately.

1,HowParameters

How indicates the switching effect. So far, there are 9 types. The effect here is:For each small shard.

The default value is 0, that is, fade in (gradually appearing). All the subsequent effects are fade in; 1, slide out from left to right and bring 0; 2, slide out from top to bottom; 3, from right to left; 4, from bottom to top; 5, left and right cross insert; 6, up and down cross insert; 7, width increased from 0 to 100%; 8, height increased from 0 to 100%

2,Countx and County

The two Parameters specify the number of blocks on the X axis and Y axis respectively, and the total number count is countx * County. If the value of countx and county is not changed, the effect looks completely different. Therefore, the effect of xmosaic. JS is not just the number specified by how.

Note:The width and height of your image must be countx and county respectively.Division!! Otherwise, there will be misplacement issues in the parts.

In my example page, the X axis and Y axis can be divided into up to 10 blocks. The total number of blocks is 10*10 = 100. There is still no problem with animation execution, but the efficiency cannot be considered.

3,Order

This parameter indicates the order. The default value is 0, that is, from the first part to the last one.

If order is 1, it indicates execution from the last to the first; 2, execution from the middle to the two ends; 3, execution from the two ends to the middle; 4, random; 5, execute all at the same time

The order parameter, in combination with the how parameter, can increase the number of special effects by 6 times!

Xmosaic. js slots:

To create a mosaic mask, you must first solve the following problems:How to partition? There are already many examples of this effect on the Internet. The latest multipart method is to use N Divs, each of which is one. These divs have the same background-image, but they all have different background-positions. Then, set the left and top values of each Div and combine them together. It looks like a complete picture-in fact, it is composed of many small pieces.

Therefore, I emphasized thatThe width and height of your image must be divisible by countx and county;Otherwise, the Shard is uneven.

Loop output of each small blockLeft and top valuesThis is also a technical activity. When I wrote xmosaic, I thought about it for a long time. Finally, I wrote it by referring to the existing examples. The principle is very simple, but the key problem is that you can't figure it out when no one clicks it. For details, see the xmosaic. js source code.

Then there is the most important question: how can we make parts execute an animation in sequence?

If I want to write an animation that gradually shows up, I have no problem at all. However, for a total of 10 chunks, the transparency of these chunks increases from 0 to 100 in turn. There are too many issues to consider.

First, no cards? Operating 10 blocks at the same time is undoubtedly a test of computer performance. However, if the mosaic switching effect written by others is not stuck with my card, it only means that I am wrong.

Second, it cannot be executed simultaneously. If the transparency of the 10 parts changes at the same time, there is no difference between the transparency and the block. This seems to be a good solution. Set a time-incrementing timer.

Again, can the animation process be interrupted? For example, if the animation is in the middle of the line, and I click the page number to trigger the next switch, what should I do if I execute half of the animation now?

Finally, what if I don't want to execute an animation in sequence for each part? What if I want to be random?

Considering the above problems, I decided to bind the animation function to each part. In this way, the animation of each block is independent and can be interrupted without affecting other blocks.

For example, if one piece is called elm, I will bind him with an animated Elm. Todo = function (){...}.. It is Elm. Todo (). Of course, it will not be called directly, but it will be called through setTimeout.

Similarly, the animation timer of this block is also stored on itself, such as Elm. Timer = setTimeout (); it is not easy to confuse when it is cleared.

Here I will introduce a new version of JavaScript function, array. map is a method to add to the array, array. MAP is used to execute a function for all elements in the array! It is too useful for my xmosaic. But the problem is that IE does not support this new method, so only one of them is simulated:

Map:Function(ARR, fun, thisr ){For(VaRI = 0, L = arr. length; I <L; I ++) {Fun. Call (thisr, arr [I], I, arr )}}
 

This is actually a part of cloudgamer.CodeIt is really easy to use. You can try to understand this code for a long time...

In addition, there is an order parameter. This parameter is difficult for me, because the default order is to execute from the first block to the last block. I also want reverse order and random. So I wrote an additional function, changei (). The purpose is to change I and multiply it by the basic speed to get the real animation speed.

------------- Finished ----------

After xmosaic. JS is completed, the greatest achievement is to learn the map method, and then have a deeper understanding of the JS timer. The second is the positioning and computing method of each small block,

Published in: http://www.jo2.org/archives/330.htm