How to realize the effect of blinds with jquery

This article will explain in detail how to achieve the shutter effect in jquery. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

General idea:

A div (width is 800px), which contains the width and height of ul and li,li are set to 560pxMagol 300px respectively (the same width and height of the picture in li). Li sets absolute positioning and div sets relative positioning.

.no0 {left:0;}

.no1 {left:160px;}

.no2 {left:320px;}

.no3 {left:480px;}

.no4 {left: 640px;}

When not animated, the width and height of each li is 160px. (width / number of pictures of 800x5x 160 div)

During the animation, the width and height of the li entered by the mouse is 560px and 300px, which shows the picture completely. Other pictures that are not entered by the mouse, with a width of (800,560) / 4=160px

When the mouse goes out of the box box, each picture returns to its original position.

Code: Title * {margin:0; padding:0; overflow: hidden;} .box {width:800px; height:300px; border:5px solid gray; margin:100px auto; position: relative;} li {list-style: none; float: left; position:absolute; / * width:160px * / height:300px; width:560px;} .no0 {left:0;} .no1 {left:160px;} .no2 {left:320px;} .no3 {left:480px;} .no4 {left: 640px;} img {width:560px; height:300px;}

/ / original position 0 160 320 480 640 lis / leftmost position 0 60 120 180 240 max / far right position: 0 560 620 680 740$ lis = $("li"); / / when the mouse enters figure 1, figure 1 to figure 4 animate $lis.eq (0) .mouseenter (function () {$lis.stop (true); $lis.eq (1). Animate ({left:560}, 1000)) $lis.eq (2). Animate ({left:620}, 1000); $lis.eq (3). Animate ({left:680}, 1000); $lis.eq (4). Animate ({left:740}, 1000);}); / / when the mouse enters figure 2, figure 2 animates to the left, figures 3 to 4 animate to the right $lis.eq (1) .Mouseenter (function () {$lis.stop (true)) $lis.eq (1). Animate ({left:60}, 1000); $lis.eq (2). Animate ({left:620}, 1000); $lis.eq (3). Animate ({left:680}, 1000); $lis.eq (4). Animate ({left:740}, 1000);}); $lis.eq (2) .Mouseenter (function () {$lis.stop (true); $lis.eq (1). Animate ({left:60}, 1000) $lis.eq (2). Animate ({left:120}, 1000); $lis.eq (3). Animate ({left:680}, 1000); $lis.eq (4). Animate ({left:740}, 1000);}); $lis.eq (3) .Mouseenter (function () {$lis.stop (true); $lis.eq (1). Animate ({left:60}, 1000); $lis.eq (2). Animate ({left:120}, 1000) $lis.eq (3). Animate ({left:180}, 1000); $lis.eq (4). Animate ({left:740}, 1000);}); $lis.eq (4) .Mouseenter (function () {$lis.stop (true); $lis.eq (1). Animate ({left:60}, 1000); $lis.eq (2). Animate ({left:120}, 1000); $lis.eq (3). Animate ({left:180}, 1000) $lis.eq (4) .animate ({left:240}, 1000);}); / / when the mouse leaves box, each picture returns to its original location $(".box") .mouseleave (function () {$lis.stop (true); $lis.eq (1). Animate ({left:160}, 1000); $lis.eq (2). Animate ({left:320}, 1000)) $lis.eq (3). Animate ({left:480}, 1000); $lis.eq (4). Animate ({left:640}, 1000);})

Running result:

Code simplification:

Title * {margin:0; padding:0; overflow: hidden;} .box {width:800px; height:300px; border:5px solid gray; margin:100px auto; position: relative;} li {list-style: none; float: left; position:absolute; width:560px; height:300px } .no0 {left:0;} .no1 {left:160px;} .no2 {left:320px;} .no3 {left:480px;} .no4 {left: 640px;} img {width:560px; height:300px;}

/ / original position 0 160 320 480 640 true / leftmost position 0 60 120 180 240 max / rightmost position: 0 560 620 680 740$ lis = $("li"); $lis.mouseenter (function () {$lis.stop (true); console.log ($(this). Index ()); var index = $(this). Index () / when the picture is entered by the mouse on the left side of the picture, animate to the left. On the right, animate $lis.each (function (I) {if (I) to the right.