When the mouse goes by, the image will be enlarged (from the center) and the center will be enlarged
Js section:
// Hover the mouse over the tag, and the corresponding image will be enlarged.
Var zoom = 1.03;
Var width = $ (this). find (". move_img"). find ("img"). width ();
Var height = $ (this). find (". move_img"). find ("img"). height ();
Var z_width = width * zoom;
Var z_height = height * zoom;
$ (". Big_kuai a"). hover (function (){
$ (This). find (". move_img"). find ("img"). animate ({
Width: z_width,
Height: z_height,
MarginTop: "-9px ",
MarginLeft: "-9px"
},1000 );
}, Function (){
$ (This). find (". move_img"). find ("img"). animate ({
Width: width,
Height: height,
MarginTop: "0px ",
MarginLeft: "0px"
},1000 );
});
The idea is as above. css and html can be written by yourself.
The effect is as follows:
Not outdated:
After:
