Jquery 方塊隨著鼠標所在的區域而放大

2019-11-21 00:28:06

字體：大中小

來源：轉載

供稿：網友

效果如下圖:

實現代碼:運行后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.VeVB.COm/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> <div   id="iwvjtn8m0"   class="dock"></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;i<count;i++){ d.addItem('<div   id="iwvjtn8m0"   class="'+i+'"></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;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需刷新才能執行]

上一篇：JQuery Easyui Tree的oncheck事件實現代碼

下一篇：jQuery 練習[二] jquery 對象選擇器(1)