Xscroll. js update: added the crossover switch effect, with ideas

See this for original xscroll release: http://www.cnblogs.com/lixlib/archive/2012/03/21/javascript-tupian-qiehuan-xscroll_js.html

2012-4-13:

Added the staggered switching effect. Let's look at the first example on the example Page. Now I can say that xscroll. js supports 17 switching effects... Or heartbleed

The so-called staggered switching means that the current image is moved to the left, the next image is moved to the right, and the next image is moved back when both are moved to the half. However, the order of overlapping images changes, the next image overwrites the current image.

The switch can also be in four directions.

Implementation of staggered switching:

First, it is inevitable to operate two images at the same time: the current image and the next image, respectively called curs and nexts. I use the left-side scrolling as an example. Before the scrolling, set the next image to display, but it is placed below the current image, so you cannot see it. The starting position of the two images is 0, which is easy to understand.

The scroll starts, and the two images scroll in the opposite direction. Therefore, each of the two images needs an end point. Since the two images cannot be opened excessively, the distance they move should not exceed the total width of the image area. Of course, it is best to be equal to the total width, not much.

To save trouble, I set their scrolling distance to half the total width of the image area. For example, the current image is rolled 200 to the left, the next image is rolled 200 to the right, and the total width is 400. Now we can see that the destination position of the current graph and the next graph is the opposite: One-200, one 200. therefore, you only need to set the end value of one of them and add a negative number to the other.

Because they need to change the direction and roll back when rolling to the end point. So I added a variable to decide whether to roll back, called yes. When yes is false, I can roll back.

VaRT =0, B0=0, // Start point C= Curs. E-B0, // The moving distance. curs. e indicates the end point of curs.=50, Direct=This. Direct, speed=This. Speed,//Pos = {},Yes =1;
 

Continue, write the rolling function. The first step of the rolling function is to judge yes for subsequent operations.

Function runing (){If(Yes ){}Else{}}
 

We know that, when yes is true, curs and nexts should "Let's go" to both sides. At this time, their starting point is 0, and the ending point is the opposite, so the moving distance is completely the opposite.

 
If(Yes) {curs. Style [direct]= Math. Floor (Tween (T ++,B0, C, ing) + 'px'; Nexts. Style [direct]= Math. Floor (Tween (T ++, B0,-C, Ing) + 'px'; SetTimeout (runing, speed );}
 

Let's take a look at the aboveCodeWhere tween is the easing formula, B0 is the starting point, and C is the moving distance. Because nexts's moving distance is opposite to curs, nexts's moving distance is-C.

Of course, this function still doesn't work. You can't keep running on both sides because of yes. You need to determine when to convert yes to false and run it back.

Because of the existence of the easing formula, it is very easy to judge the time to run back, that is, t ++ has exceeded ing (that is, the animation has been executed ).

 If  (Yes ){  If (T <ing ) {Curs. Style [direct] = Math. Floor (Tween (T ++, B0, C, ing) + 'px' ; Nexts. Style [direct] = Math. Floor (Tween (T ++, B0,-C, ing) + 'px'; SetTimeout (runing, speed );}  Else  {Yes = 0 ; T = 0 ; Curs. style. zindex = 5 ; Nexts. style. zindex = 10 ; SetTimeout (runing, speed );}} 

After the animation is completed (that is, curs and nexts reach the end respectively), you can change "yes" to "false". Because t has always become very large in ++, so we set T to the initial value 0 again. When we roll back, the current graph should be hidden below the next graph, So we change their respective zindexes;LastDon't forget to call the function again, or the image won't go back.

During rollback, you should note that the starting point of curs is now his original endpoint, and the starting point of nexts is also the end point of nexts, but now their end point is their original starting point, that is, 0. at the same time, because of rollback, their moving distance is reversed.

 Function  Runing (){  If  (Yes ){  If (T <ing ) {Curs. Style [direct] = Math. Floor (Tween (T ++, B0 , C , Ing) + 'px'; Nexts. Style [direct] = Math. Floor (Tween (T ++, B0 , -C , Ing) + 'px' ; SetTimeout (runing, speed );}  Else  {Yes = 0 ; T = 0 ; Curs. style. zindex = 5 ; Nexts. style. zindex = 10; SetTimeout (runing, speed );}}  Else  {  If (T <ing ) {Curs. Style [direct] = Math. Floor (Tween (T ++, Curs. e , -C , Ing) + 'px' ; Nexts. Style [direct] = Math. Floor (Tween (T ++, Nexts. e , C , Ing) + 'px'; SetTimeout (runing, speed );}  Else  {Yes = 1 ; T = 0 ; Nexts. Style [direct] = 0 ; Curs. Style [direct] = 0 ; Root. After ();}}} 

Rollback also needs to end. You can also determine whether the animation execution time is complete (we recommend that you add more strict judgment conditions, for example, the coordinates of curs have already exceeded 0 ), what to do after rollback: Change "yes" to "true", change "T" to "0", and call the final function. You can also confirm whether curs and nexts have reached the specified position.

The above is the implementation idea of staggered switching. Exhausted.

I don't know if there is any more efficient method. I hope you can give me some advice.

Xscroll official Update log