Original jQuery magic lamp plug-in

Because of my poor writing skills, I have never had the courage to write my first blog post. Today, I finally have the courage to start my work.

At the invitation of a friend, he helped his company make a magic lamp playing effect. The effect is as follows:

　　

In the middle of the thumbnail, the current picture is played, and the two sides are scattered, gradually narrowing down and reducing transparency. Assuming that the video is currently being played to 0th images, the order is as follows:

　　0

1 4

2 3

The following figure shows the order of the converted graph in a counter-clockwise direction:

4

0 3

1 2

This is only the playback effect of the thumbnail. When the thumbnail is rotated, a corresponding big image is followed by a scroll from right to left, and the speed of entering the big image is corresponding to the thumbnail rotation. The overall effect is as follows:

　　

 

I want to separate the thumbnail rotation from the larger image rolling. The thumbnail rotation is used as a separate jQuery plug-in, and the events in the plug-in drive the larger image rolling. The following describes the implementation of the thumbnail rotation plug-in:

1. Plug-in parameters:

This. defaults = {auto: false, // whether to automatically play width: 85, // The width of the thumbnail height: 42, // The height of the thumbnail onstart: null, // start rolling onchange: null // rolling event };

2. Plug-in events:

Onstart eventTo trigger the rotation every time the rotation starts, the transfer parameters include: The jQuery object of the current thumbnail and the jQuery object rotated to the next thumbnail:

opt.onstart && opt.onstart(me.Images.img[curIdx].img$, me.Images.img[idx].img$);

Onchange event, Is the progress parameter that is triggered every time the scroll distance is reached, and the current scroll to the percentage of the progress parameter:

opt.onchange && opt.onchange(stepPercent[step]);

The following describes the stepPercent [step] array:

Thumbnail rotation uses the method of timed and variable speed, that is, when the rotation fails, the rotation turns to one or two images, and the time is fixed, however, the speed of rotating two images is faster than that of rotating one image, so that even if there are more images, the rolling distance will not be long before rolling.

StepPercent [step] is designed for this array. Every rotation is fixed to 15 steps, and the rotation distance of each step is gradually reduced, thus achieving a variable speed effect, generate the following array:

Var stepPercent = new Array (15); // fixed the number of 15 steps, each step to a number of percent. StepPercent [0] = 0.2; // start time: 20% stepPercent [1] = 0.2 + 0.2*0.81; // Step 2 for (var I = 2, total = stepPercent [1]; I <stepPercent. length; I ++) {stepPercent [I] = total + (total-stepPercent [I-2]) * 0.81; // initialize the sequence. Total = stepPercent [I]; if (I = stepPercent. length-1) stepPercent [I] = 1 ;}

The first step is 20%, and then each step is 81% of the previous step, that is, the speed is reduced by 19% each time, but there is an error in decimal calculation. By 15th, it may be very close to 1, but it is not a value of 1. Therefore, set step 1 to 1, that is, 15th, and the scroll ends.

(Note: How was this series designed? I used Excel to find a cell and fill in 0.2. The formula for the next cell is 0.81 of the previous one, and then drag a little more down, add the above value to a value close to 1, that is, the number of required steps .)

If this series does not need to be generated by JS, you can also define an array directly for the series created in Excel. If you want to modify the speed later, just do it again.

　　

During rotation, the size, transparency, position, and other information of the thumbnail are calculated using the proportional factor set in the stepPercent array.

For more information about the plug-in, please download the source code and view it. Next, let's talk about how to scroll through the thumbnail.

3. Large image scrolling

When a large image is rolled along with the thumbnail, but it is rolled to the first few, the effect is always followed by the back of the current big image, to avoid skipping too many images, because the speed is too fast, the onstart event comes in handy.

InOnstartIn the event, first move the current graph to the top of the big chart list, and then move the target graph to the end of the current graph ,(Note: To Move the current graph to the top of the big chart list, it is possible that the next one is in front of the current one, the current one is moved to the back, and the scroll bar is moved.).

ThenOnchangeIn the event, you only need to set the scroll distance of the horizontal scroll bar based on the input progress parameter. The scrolling of the large image is as simple as that. The specific JS is as follows:

$ (Function () {$ ("# div_slide "). slide ({Auto: True, width: 85, height: 42, onstart: function (curimg, nextimg) {var CDATA = curimg. ATTR ("data"); var ndata = nextimg. ATTR ("data"); var bigcur = $ ("#" + CDATA), bignext = $ ("#" + ndata); var allbigimg = bigcur. parent (). children ("IMG"); var curindex = allbigimg. index (bigcur [0]); var nextindex = allbigimg. index (bignext [0]); var firstimg = $ (allbigimg [0]); If (firstimg . ATTR ("ID ")! = Bigcur. ATTR ("ID") bigcur. insertbefore (firstimg); $ ("# div_bigimg "). scrollleft (0); bignext. insertafter (bigcur);}, onchange: function (percent) {$ ("# div_bigimg "). scrollleft (1263 * percent) ;}}); var bigdiv =$ ("# div_bigimg"); var bigdivpos = bigdiv. position (); bigdiv. scrollleft (0); // At the beginning, the scroll bar is rolled to the header because I found that when the scroll bar is not in the header, press F5 to refresh and the scroll bar will not jump to the header. $ ("# Div_slide" detail .css ({"TOP": (bigdivpos. top + bigdiv. height ()-$ ("# div_slide "). height () + "PX", "Left": bigdivpos. left + "PX "});});

Source code download: slidedemo

 

If you find any problems or improvements during use, please leave a message. Thank you.