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 that you can view more special effects by viewing the switching Parameter Function under the example Page. Default effects are the simplest.

For how to use XMosaic. js, see the source code on the sample page. The html structure is the same as the html structure for general image switching, for example:

 
 

  
  
<div id="jsF"> 
  
  
<a href="#" title=""></a> 
  
  
<a href="#" title=""></a> 
  
  
<a href="#" title=""></a> 
  
  
<a href="#" title=""></a> 
  
  
</div> 
 
 

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

 
 

  
  
var msk = XMosaic('jsF'); 
 
 

Or, you want to customize the parameters:

 
 

  
  
var msk = XMosaic('jsF',{pager:'pager',delay:3000,countX:10,countY:1,how:2,order:0 }); 
 
 

XMosaic. js parameter description:

How: Specifies the switchover effect. The default value is 0.

CountX: specifies the number of blocks in the horizontal direction. The default value is 5.

CountY: specifies the number of blocks in the vertical direction. The default value is 1.

Order: The animation execution sequence of each part. The default value is 0.

Delay: the pause time. The default value is 4000.

Pager: the ID of the page number block. It is null by default.

Event: the page number switch event. The default value is mouseover.

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

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,How Parameter

How indicates the switching effect. So far, there are 9 types. The effect here is for each small part.

The default value is 0, that is, fade-in gradually appears.) All the following effects are fade-in; 1, slide from left to right and bring 0; 2, slide 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 divisible by countX and countY.!! 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(var i=0,l=arr.length;i<l;i++){  
  
  
            fun.call(thisr,arr[i],i,arr)  
  
  
        }  
  
  
    } 
 
 

This is actually a piece of code in cloudgamer, which is really useful. 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.

For more information, see the original article.