The jquery control picture is gradually magnified by the center point _jquery

Sometimes we need to do a when the mouse placed in the picture, I hope the picture gradually become larger, that is, the picture width and height gradually become larger, but at this time, its left value and top value unchanged, it does not appear to be from the center point to scale. The following figure:

Zooming from a central point

The implementation code is as follows:

 <meta charset= "Utf-8" > <style type= "text/css" > #div1 {width:600px; height:40 0px; margin:50px Auto; position:relative; Text-align:center; 
padding-left:50px;} 
#div1 img{position:absolute; left:0 top:0; margin:0 Auto; </style> <div id= "Div1" >  </div> <scrip T type= "Text/javascript" src= "js/jquery-1.7.1.min.js" ></script> <script type= "Text/javascript" > $ ( 
Function () {$ (' #div1 img '). MouseEnter (function () {var wvalue=1.5 * $ (this). width (); 
var hvalue=1.5 * $ (this). Height (); $ (this). Animate ({width:wvalue, Height:hvalue, left: ("-" + (0.5 * $ (a). Width ())/2), Top: ("-" + (0.5 * $ (this). Height ()) 
/2)}, 1000); 
}. MouseLeave (function () {$ (this). Animate ({width: "m", Height: "1000", Left: "0px", Top: "0px"},); 
}); 
}); </script> 

The above is a small set to introduce the jquery control picture by the central point gradually magnified the relevant knowledge, hope to help everyone, if you want to know more content please pay attention to cloud Habitat community website!