效果如下图:

实现代码:运行后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 titleJquery 方块随着鼠标所在的区域而放大 /title script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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 div/div 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;icount;i++){ d.addItem('div/div'); } //绑定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;id.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 (z1)？1:z; } /script /body /html
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]