jQuery example of the effect of enlarging the picture when the mouse is hovered_jquery

This effect originally originated from an idea of ​​Comrade Xiao Min. When I first started doing it, I could only achieve that the pop-up picture was fixed and could not move with the mouse. Finally, I improved it and finally achieved a more ideal effect. Today I will share my experience in creating this effect with you. Let’s take a look at the final effect demonstration first:

HTML structure part:
First write an unordered list structure. The img tag in the a tag is used to store small pictures. The a tag adds a rel attribute to store the path of the large picture.

Copy code The code is as follows:

• 
  
• 
  < ;LI sizcache="6" sizset="9">
  

CSS style sheet part:
bigimage uses jQuery Create the id of a p tag to store large pictures, set its style to absolute positioning, and hide it first. Adding a black background to the a tag is to pave the way for the darkening effect of the image. Just like that, a simple photo album effect is ready.

Copy code The code is as follows:

ul#gallery { list-style:none; width: 660px; margin:0 auto 10px; padding-left:20px; border:1px solid #d3d3d3; background:#fff; 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 to pave the way for the darkening effect of the image*/ display:block; width:200px; height:200px; }
#bigimage { position:absolute; display:none; /*Set the parent label of the large image to relative positioning and set the display style to hidden*/ }
#bigimage img { width:400px; height:400px; padding:5px; background:#fff; border:1px solid #e3e3e3; }

jQuery code part:
First declare 2 variables x and y to store large images The distance from the mouse. Add a p tag with the ID bigimage to the body to store the large image. The path of the large image is included in the rel attribute of the a tag. When the mouse hovers over the small picture, the obtained coordinates of the mouse in the browser are assigned to the coordinates of the absolute positioning of the large picture, and displayed with a fade-in effect. After that, bind a mousemove event to the small picture, that is, when the mouse moves, the large picture will move with the mouse. Look at the following code:

Copy the code The code is as follows:

At this point, the effect is almost there, but as Comrade Lan Qiufeng mentioned, The effect is not perfect yet. If the large picture that pops up exceeds the width of the browser, a scroll bar will appear, which is really bad for the user experience. I took advantage of the time on the weekend and made modifications based on the original.
Let’s analyze the idea first. By default, the position of the large picture that pops up is always to the right of the current mouse pointer. If the width of the current mouse pointer from the right border of the browser is less than the width of the large picture that pops up, then Pictures may overflow the browser. Then just write a statement to determine whether the width of the current mouse pointer from the border on the right side of the browser is smaller than the width of the large image, and then display it based on this judgment.
With the above idea, it is easy to handle. In order to make the code more concise and improve reusability, I added a new widthJudge function to judge the width:

Copy code The code is as follows:

function widthJudge(e){
//The total width of the page minus the current X coordinate of the mouse is the width of the right border
var marginRight = document.documentElement.clientWidth - e.pageX;
// The width of the large picture of the pop -up
var ImageWidth = $ ("#Bigimage"). Width ()
// > if(marginRight {
//Recalculate the value of variable x
x = imageWidth 22;
Get the new value of x
$("#bigimage").css({top:(e.pageY - y ) 'px',left:(e.pageX - x ) 'px'});
                                                                                                                  If the value is enough to display a large image, it will still be displayed in its original position
$("#bigimage").css({top:(e.pageY - y ) 'px',left:(e.pageX x ) 'px '});
};
}


Finally combined with the above code, the complete jQuery code part is as follows:

Copy code

The code is as follows: // $(function(){ 

 var x = 22;
 var y = 20;
$("a.smallimage").hover(function(e){
$("body") .append('

'); ('img').stop().fadeTo('slow',0.5);
                         widthJudge(e);                                                                                                          widthJudge(e);                                                                        ;
},function(){
$(this).find('img').stop().fadeTo('slow',1);
$("#bigimage").remove ();
});
$("a.smallimage").mousemove(function(e){
widthJudge(e); //Call the width judgment function
});
function widthJudge(e){
var marginRight = document.documentElement.clientWidth - e.pageX;
var imageWidth = $("#bigimage").width();
if(marginRight                                                                                    px’}); pageX x ) 'px'});
Solved the problem of pictures overflowing the browser, this effect is pretty good. If you like this effect, you can download the source file.