jquery mouse hover time to enlarge the effect of the image produced

Last Update:2017-01-13 Source: Internet

Author: User

Tags bind cdata

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The effect is shown in the following illustration

Let's look at the complete code first.

The code is as follows

Copy Code

<! DOCTYPE html>
<meta charset= "gb2312"/>
<title> the effects of enlarged images based on the jquery mouse hover </title>
<style>
* {margin:0; padding:0;}
img {vertical-align:bottom; border:none;}
Body {background: #f0f0f0; height:800px; font-family:arial;}
UL {List-style:none;}
h1{font-size:20px width:680px margin:3% auto 5px; color: #202020;
h6{width:680px; margin:0 auto 20px; font-size:12px font-weight:normal; color: #333;}
H6 a {color: #09c;}
ul#gallery {width:660px; margin:0 auto 10px; padding-left:20px border:1px solid #d3d3d3 background: #fff; Overflow:hidd En }
Ul#gallery li {width:200px; height:200px float:left; margin:20px 20px 20px 0; display:inline;}
Ul#gallery Li a.smallimage {background: #333; display:block; width:200px; height:200px;}
#bigimage {position:absolute; display:none;}
#bigimage img {width:400px; height:400px; padding:5px background: #fff; border:1px solid #e3e3e3;}
</style>
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script>
<! [cdata[
$ (function () {

var x = 22;
var y = 20;

$ ("A.smallimage"). Hover (function (e) {
$ ("Body"). Append (' <p id= "bigimage" ></p> ');
$ (this). FIND (' img '). Stop (). Fadeto (' slow ', 0.5);
Widthjudge (e);
$ ("#bigimage"). FadeIn (' fast ');
},function () {
$ (this). FIND (' img '). Stop (). Fadeto (' slow ', 1);
$ ("#bigimage"). Remove ();
});

$ ("A.smallimage"). MouseMove (function (e) {
Widthjudge (e);
});

function Widthjudge (e) {
var marginright = Document.documentelement.clientwidth-e.pagex;
var imagewidth = $ ("#bigimage"). width ();
if (MarginRight < imagewidth)
{
x = ImageWidth + 22;
$ ("#bigimage"). CSS ({top: (e.pagey-y) + ' px ', Left: (e.pagex-x) + ' px '});
}else{
x = 22;
$ ("#bigimage"). CSS ({top: (e.pagey-y) + ' px ', Left: (E.pagex + x) + ' px '});
};
}
});
]]>
</script>

<body>

Let me give you a step to not parse this example

HTML Structure section:

First, write a structure of the unordered list, the IMG tag in a tag is used to hold the small picture, a tag to add a rel attribute, to store the path of the large picture.

The code is as follows	Copy Code
<ul id=gallery> <li><a class=smallimage href= "http://stylechen.com/" rel=images/001_big.jpg></A></LI> <li><a class=smallimage href= "http://stylechen.com/" rel=images/002_big.jpg></A></LI> <li><a class=smallimage href= "http://stylechen.com/" rel=images/003_big.jpg></A></LI> </UL>

CSS style sheet section:

The

Bigimage is the ID of a P tag created with jquery to hold a large picture, set its style to absolute positioning, and hide it first. Add a black background to the a label to pave the effect of darkening the picture. In this way, a simple album effect is done

The code is as follows

Copy Code

ul#gallery {list-style:none; width:660px; margin:0 auto 10px; padding-left:20px; border:1px solid #d3d3d3; background: #f ff Overflow:hidden; }

Ul#gallery li {width:200px; height:200px float:left; margin:20px 20px 20px 0;}

Ul#gallery Li a.smallimage {background: #333;/* Add a black background for the image dimming effect do matting/display:block; width:200px; height:200px;}

#bigimage {position:absolute; display:none/* Large picture's parent label settings are relative positioned and the display style is set to hidden/}

#bigimage img {width:400px; height:400px; padding:5px background: #fff; border:1px solid #e3e3e3;}

jquery Code section:

First declare 2 variables x,y used to store large pictures away from the mouse. Add a P tag with ID bigimage in the body to hold the large picture, and the path to the big picture is included in the Rel attribute of the A tag. When the mouse in the small picture hover, will get the mouse in the browser coordinates assigned to the large picture of the absolute positioning of the coordinates, and to fade in the effect displayed. Later, the small picture is bound to a MouseMove event, that is, when the mouse moves, the big picture will follow the mouse movement. Look at the following code:

The code is as follows

Copy Code

var x = 22;
var y = 20;

$ ("A.smallimage"). Hover (function (e) {//bind a mouse hover event
Create a new P tag to hold the big picture, This.rel is the path to get the big picture of a label and append it to the body
$ ("Body"). Append ("<p id=" bigimage "></p>");

Change the transparency of the small picture to 0.5, combining the above CSS, it looks like the picture is dimmed
$ (this). FIND ("img"). Stop (). Fadeto ("slow", 0.5);

The coordinates of the mouse and the declared x,y are calculated and assigned to the coordinates of the absolute positioning of the large picture, and then the Fadein effect is displayed
$ ("#bigimage"). CSS ({top: (e.pagey-y) ' px ', left: (E.pagex x) "px"}). FadeIn ("fast");

},function () {<a href= "http://www.sorcerylinux.org/" >best Australian pokies</a>//mouse left

Restore the darkened image
$ (this). FIND ("img"). Stop (). Fadeto ("Slow", 1);

Remove the new P tag
$ ("#bigimage"). Remove ();
});

$ ("A.smallimage"). MouseMove (function (e) {//bind a mouse to move event

The coordinates of the mouse and the declared x,y are calculated and assigned to the coordinates of the absolute positioning of the large picture so that the large picture can be moved with the image.
$ ("#bigimage"). CSS ({top: (e.pagey-y) "px" and Left: (E.pagex x) "px"});
});
});

]]>
</script>

By this step, the effect has been almost, but as Comrade Lanqiufeng mentioned, the effect is not perfect. If the larger picture pops up than the width of the browser, the scroll bar appears, which is really bad for the user experience. While I have time on weekends, I have made changes on the original basis.

The first analysis of the idea, by default, the pop-up large picture position is always on the right side of the current mouse pointer, if the current mouse pointer away from the right side of the browser is less than the width of the larger pop-up picture, the picture overflow browser phenomenon. Then just write a statement that determines whether the current mouse pointer is less than the width of the large picture on the right side of the browser, and then displays it based on that judgment.

With the above thinking is good to do, in order to make the code more concise, improve reusability, I added a Widthjudge function to determine the width of

code is as follows

copy code

function Widthjudge (e) {
///page total width minus the current x coordinate of the mouse to get the width of the right border
var MarginRight = Document.documentelement.clientwidth-e.pagex;

//Get the width of the large picture that pops up
var imagewidth = $ ("#bigimage"). width ();

//If the width of the right edge is less than the width of the large picture that pops up
if (MarginRight < imagewidth)
{
//recalculate value of variable x
x = ImageWidth

//At this point the position of the large picture should be the width of the current mouse pointer minus the value of the new X
$ ("#bigimage"). CSS ({top: (e.pagey-y) "px", Left: (e.pagex-x) "px"}); &NBSP
}else{//otherwise
//x is still defined as 22, this step must not be omitted, because the value of the previous X has changed
x =;

//If the width on the right side is enough to show the large picture, it will still appear in the original position
$ ("#bigimage"). CSS ({top: (e.pagey-y) "px" and Left: (E.pagex x) "px"});
};
}

Finally, with the above code, the complete jquery Code section is as follows:

The code is as follows

Copy Code

Solve the problem of the image overflow browser, this effect is not bad. If you like the effect

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More