Jquery 方块随着鼠标所在的区域而放大

效果如下图:

实现代码:运行后F5刷新下

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Jquery 方块随着鼠标所在的区域而放大 </title> <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;overflow: hidden;} </style> </head> <body><script language="javascript" type="text/javascript"> //配置 var m=5;//最大倍数 var s=400;//距中心最大距离 var count=20;//个数 //Dock类 function Dock（）{ this.dockItems=[]; this.addItem=function（item）{ this.dockItems.push（$（item））; $（item）.appendTo（".dock"）; }; } //生成Dock对象实例 var d=new Dock（）; //循环插入count个dockItem dom对象 for（var i=0;i<count;i++）{ d.addItem（""）; } //绑定dockItem函数 $（".dock div"）.bind（"mouseover",function（event）{ var w=$（this）.width（）; var h=$（this）.height（）; var offset=$（this）.offset（）; onmouseItemout（offset.top）; }）; //处理子对象样式 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"}）; } } //计算放大倍数 function zoomD（m,s,d）{ var z=m*（s-d）*（s-d）/（s*s+1）; return （z<1）？1:z; } </script> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]