Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to achieve the shutter effect of jquery, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

At first, I felt very complicated when I looked at the effect. I thought it was an animation written by a change in width, but later I thought that if it was a change in width, the picture would certainly be distorted when it became narrow. later, after learning, I found that the original principle was very simple:

The basic principle is that the pictures are absolutely positioned in the box, and then they are positioned separately and divided equally into the whole box, and the picture will show a cascading effect (in this case, the position is controlled by the left value); then through the jq control, when the mouse over a picture, the picture is fully displayed (that is, the left value changes), and the left values of other pictures are also changed accordingly.

Text description is very difficult to understand, first use html and css layout effect

Documentdiv {width: 420px; height: 186px; border: 2px solid # ccc; overflow: hidden; position: 100px auto;} img {border: none; display: block; position: absolute; top: 0;} img:nth-of-type (1) {left: 0;} img:nth-of-type (2) {left: 84px;} img:nth-of-type (3) {left: 168px;} img:nth-of-type (4) {left: 252px;} img:nth-of-type (5) {left: 336px;

The layout is simple, and then jq controls the change in the relative position of each image.

Starting position: the left values of the five pictures have been written in css, that is, the width of the whole box is divided equally.

Mouse over: after the picture is fully displayed, that is, occupy the width 280px (the width of the picture is 280px), the remaining width is (box width-280px) / the number of remaining pictures, according to the value to determine the end position of each picture, Left value

I feel that what I said is very complicated. First, take a look at the animation effect when the mouse talked about a certain picture:

Documentdiv {width: 420px; height: 186px; border: 2px solid # ccc; overflow: hidden; position: 100px auto;} img {border: none; display: block; position: absolute; top: 0;} img:nth-of-type (1) {left: 0;} img:nth-of-type (2) {left: 84px;} img:nth-of-type (3) {left: 168px;} img:nth-of-type (4) {left: 252px;} img:nth-of-type (5) {left: 336px;

Var lefts;var idx;$ ("img") .each (function () {$(this) .mouseenter (function (e) {idx = $(this). Index (); lefts = idx * 35; / / changes to the current picture $(this) .stop (true). Animate ({"left": idx * 35}, 1000);})

The current picture can be played happily, and the next focus is how to move the rest of the picture.

At this point, we can divide the rest of the picture into left and right parts, and use the ": lt ()" and ": gt ()" methods of jq to write out the effect of the rest. Here is a small pit, I also went around for a long time, and finally it was only when others reminded me that I came out.

Take the animation on the left side of the current picture as an example, this is what I wrote at first.

Documentdiv {width: 420px; height: 186px; border: 2px solid # ccc; overflow: hidden; position: 100px auto;} img {border: none; display: block; position: absolute; top: 0;} img:nth-of-type (1) {left: 0;} img:nth-of-type (2) {left: 84px;} img:nth-of-type (3) {left: 168px;} img:nth-of-type (4) {left: 252px;} img:nth-of-type (5) {left: 336px;

Var lefts;var idx;$ ("img") .each (function () {$(this) .mouseenter (function (e) {idx = $(this). Index (); lefts = idx * 35; / / changes to the current picture $(this) .stop (true). Animate ({"left": idx * 35}, 1000) $("img:lt (idx)") .each (function () {$(this) .stop (true). Animate ({"left": ($(this). Index ()) * 35}, 1000)});})

There seems to be no mistake, witnessing miracles ~ ~ miracles ~ however, there is no miracle. The reason is that $("img:lt (idx)") is written, the idx inside is no longer a variable, so we can no longer get the current idx value. We can define a variable outside, connect lt and variable idx with +, and then introduce the variable into it.

Therefore, after the change is as follows:

Documentdiv {width: 420px; height: 186px; border: 2px solid # ccc; overflow: hidden; position: 100px auto;} img {border: none; display: block; position: absolute; top: 0;} img:nth-of-type (1) {left: 0;} img:nth-of-type (2) {left: 84px;} img:nth-of-type (3) {left: 168px;} img:nth-of-type (4) {left: 252px;} img:nth-of-type (5) {left: 336px;

Var lefts;var idx;var imgL; $("img") .each (function () {$(this) .mouseenter (function (e) {idx = $(this). Index (); imgL = "img:lt (" + idx + ")" lefts = idx * 35; / / changes in the current picture $(this) .stop (true). Animate ({"left": idx * 35}, 1000) $(imgL) .each (function () {$(this) .stop (true) .animate ({"left": ($(this). Index ()) * 35}, 1000)});})

In this way, the miracle occurs ~ ~ the same truth, and the same method on the right.

The final code is as follows:

Documentdiv {width: 420px; height:186px; border: 2px solid # ccc; overflow: hidden; position: 100px auto;} img {width:280px; height:186px; border: none; display: block; position: absolute; top: 0;} img:nth-of-type (1) {left: 0;} img:nth-of-type (2) {left: 84px;} img:nth-of-type (3) {left: 168px;} img:nth-of-type (4) {left: 252px } img:nth-of-type (5) {left: 336px;}

/ / simplified method var lefts;var idx;var imgL; var imgR;$ ("img") .each (function () {$(this) .mouseenter (function (e) {idx = $(this) .index ()) ImgL = "img:lt (" + idx + ")" / / get all the pictures on the current left. If you directly use $("img:lt (idx)"), idx will be treated as a string and cannot get the corresponding value imgR = "img:gt (" + idx + ")" / / get all the pictures on the current right lefts = idx * 35 / / changes to the current picture $(this) .stop (true) .animate ({"left": idx * 35}, 1000) / / changes in the left picture $(imgL) .each (function () {$(this) .stop (true). Animate ({"left": ($(this). Index ()) * 35}, 1000)}) / / changes in the right picture $(imgR) .each (function () {$(this) .stop (true). Animate ({"left": ($(this). Index () + 7) * 35}, 1000)})) }) $("img") .each (function () {$(this) .mouseleave (function () {$("img") .each (function () {$(this) .stop (true). Animate ({"left": ($(this). Index ()) * 84}, 1000);})}) }) Thank you for reading this article carefully. I hope the article "how to achieve the shutter effect of jquery" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.