Home>

Today I tried to write the picture shutter effect in jq.Is the mouse over that picture,That picture shows,Other pictures zoom out ~

When I first saw the effect, it felt so complicated.I thought it was an animation of a change in width,But after thinking about it,If it is a width change,Then the picture will be distorted when it gets narrower.After studying,It turns out that the principle is simple:

The basic principle is,Position the pictures absolutely in the box,Then locate them separately,Divide the whole box equally,The picture will show a cascading effect (in this case, the position is controlled by the left value);then through jq control, when the mouse passes over a picture, the picture is completely displayed (that is, the left value changes), and the left of other pictures The value is changed accordingly.

The description is difficult to understand,First on the html and css layout effect

<! Doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>document</title>
</head>
<body>
<style type="text/css">
div {
 width:420px;
 height:186px;
 border:2px solid #ccc;
 overflow:hidden;
 position:relative;
 margin: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;
}
</style>
<div>
 <img src="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
 <img src="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
 <img src="http://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg">
 <img src="http://www.wallcoo.com/nature/wild_field_01/wallpapers/1440x900/3787717_wild_field_v1224236762.jpg">
 <img src="http://pic31.nipic.com/20130628/10700765_164502542117_2.jpg">
</div>
</body>
</html>

The layout is simple,The next step is to control the change of the relative position of each picture.

Starting position:The left value of the five pictures has been written in css.Is to divide the width of the whole box equally;

When the mouse passes by:The picture passing by is completely displayed,That is to occupy a width of 280px (the width of the picture is 280px), and the remaining width is (box width -280px)/the number of remaining pictures,Determine the ending position of each picture according to the obtained value,left value

Feeling so complicated,First look at the animation effect when the mouse talked about a certain picture:

<! Doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>document</title>
</head>
<body>
<style type="text/css">
div {
 width:420px;
 height:186px;
 border:2px solid #ccc;
 overflow:hidden;
 position:relative;
 margin: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;
}
</style>
<div>
 <img src="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
 <img src="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
 <img src="http://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg">
 <img src="http://www.wallcoo.com/nature/wild_field_01/wallpapers/1440x900/3787717_wild_field_v1224236762.jpg">
 <img src="http://pic31.nipic.com/20130628/10700765_164502542117_2.jpg">
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
var lefts;
var idx;
$("img"). each (function () {
 $(this) .mouseenter (function (e) {
 idx=$(this) .index ();
 lefts=idx * 35;
 //Change of current picture
 $(this) .stop (true) .animate ({"left":idx * 35}, 1000);
 });
})

The current picture can play happily,The next point is how to move the rest of the pictures.

At this point, we can divide the remaining pictures into left and right parts.Use jq's ":lt ()" and ":gt ()" methods to write the effect of the rest.There is a small pit here,I have been around for a long time,Finally, it was only someone reminded me to get out.

Take the animation effect on the left side of the current picture as an example.I originally wrote like this

<! Doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>document</title>
</head>
<body>
<style type="text/css">
div {
 width:420px;
 height:186px;
 border:2px solid #ccc;
 overflow:hidden;
 position:relative;
 margin: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;
}
</style>
<div>
 <img src="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
 <img src="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
 <img src="http://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg">
 <img src="http://www.wallcoo.com/nature/wild_field_01/wallpapers/1440x900/3787717_wild_field_v1224236762.jpg">
 <img src="http://pic31.nipic.com/20130628/10700765_164502542117_2.jpg">
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
var lefts;
var idx;
$("img"). each (function () {
 $(this) .mouseenter (function (e) {
 idx=$(this) .index ();
 lefts=idx * 35;
 //Change of current picture
 $(this) .stop (true) .animate ({"left":idx * 35}, 1000);
  $("Img:lt (idx)"). Each (function () {
 $(this) .stop (true) .animate ({"left":($(this) .index ()) * 35}, 1000)
 })
 });
})

Nothing seems wrong,Witness the miracle ~~~ The miracle ~~ The trace ~~~ But there is no miracle,The reason is $("img:lt (idx)")The idx inside is no longer a variable,So we cannot get the current idx value, we can define a variable outside,Connect lt and the variable idx with + at the same time, and then import the variables.

So after the change:

<! Doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>document</title>
</head>
<body>
<style type="text/css">
div {
 width:420px;
 height:186px;
 border:2px solid #ccc;
 overflow:hidden;
 position:relative;
 margin: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;
}
</style>
<div>
 <img src="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
 <img src="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
 <img src="http://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg">
 <img src="http://www.wallcoo.com/nature/wild_field_01/wallpapers/1440x900/3787717_wild_field_v1224236762.jpg">
 <img src="http://pic31.nipic.com/20130628/10700765_164502542117_2.jpg">
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
var lefts;
var idx;
var imgl;
$("img"). each (function () {
 $(this) .mouseenter (function (e) {
 idx=$(this) .index ();
  imgl="img:lt (" + idx + ")"
 lefts=idx * 35;
 //Change of current picture
 $(this) .stop (true) .animate ({"left":idx * 35}, 1000);
  $(imgl) .each (function () {
 $(this) .stop (true) .animate ({"left":($(this) .index ()) * 35}, 1000)
 })
 });
})

Then a miracle appeared ~~ The same reason,The same applies to the right.

The final code is as follows:

<! Doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>document</title>
</head>
<body>
<style type="text/css">
div {
 width:420px;
 height:186px;
 border:2px solid #ccc;
 overflow:hidden;
 position:relative;
 margin: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;
}
</style>
<div>
 <img src="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
 <img src="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
 <img src="http://src.house.sina.com.cn/imp/imp/deal/5c/fa/e/afb00d1b581922fa567f9d65bfd_p1_mk1.jpg">
 <img src="http://www.wallcoo.com/nature/wild_field_01/wallpapers/1440x900/3787717_wild_field_v1224236762.jpg">
 <img src="http://pic31.nipic.com/20130628/10700765_164502542117_2.jpg">
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
//The streamlined 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 pictures on the left side,If you use $("img:lt (idx)") directly, idx will be treated as a string.
Can't get the corresponding value
 imgr="img:gt (" + idx + ")" //Get all pictures on the right
 lefts=idx * 35;
 //Change of current picture
 $(this) .stop (true) .animate ({"left":idx * 35}, 1000);
 //Change of the picture on the left
 $(imgl) .each (function () {
 $(this) .stop (true) .animate ({"left":($(this) .index ()) * 35}, 1000)
 })
 //Change of the picture on the right
 $(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);
 })
 });
})
</script>
</body>
</html>

Mouse out effectIs to return to the original state,No more narration.

Method may not be the easiest method,It may not be exhaustive,I hope the great gods give you a lot of advice.I also learn a lot ~~~

  • Previous Implementation method of Android listening input method popup and closing
  • Next Summary of PHP GD library related image generation and processing functions