The effect of the following figure:
Implementation code: After running F5 refresh
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml > <pead> <title>jquery box is enlarged with the mouse area </title& Gt <script src= "Http://img.jb51.net/jslib/jquery/jquery14.js" type= "Text/javascript" ></script> <style Type= "Text/css" > *{margin:0;padding:0;} . dock {Text-align:center;} . Dock div{width:8px;height:8px;border:1px #dfdfdf solid background: #dfdfdf; margin:2px auto; line-height:0px;o Verflow:hidden;} </style> </pead> <body> <div class= "Dock" ></div> <script language= "JavaScript" type= "Text/javascript" >//configuration var m=5;//max multiple var s=400;//distance center Max distance var count=20;//number//dock class function Dock () {This.dock Items=[]; This.additem=function (item) {This.dockItems.push ($ (item)); $ (item). Appendto (". Dock"); }; ///Generate Dock object instance var d=new dock (); Loop Insert Count Dockitem Dom object for (Var i=0;i<counti++) {d.additem (' <div class= ' +i+ ' "></div> '); }//Binding Dockitem function $ (". Dock div"). Bind ("MouseOver", function (event) {var w=$ (this). width (); var h=$ (this). Height (); var offset=$ (this). offset (); Onmouseitemout (Offset.top); }); Handling child Object Style function Onmouseitemout (top) {for (Var i=0;i<d.dockitems.length;i++) {var c=d.dockitems[i].attr (' class ') ; var of=$ ("." +c). offset (); D1=math.abs (Of.top-top); var z=zoomd (M,S,D1); $("." +c). css ({width:8*z+ "px", height:8*z+ "px"}); Compute magnification function ZOOMD (m,s,d) {var z=m* (s-d) * (s-d)/(s*s+1); Return (z<1) 1:z; } </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
