Jquery 方塊隨著鼠標(biāo)所在的區(qū)域而放大

更新時間：2010年05月28日 02:28:13 作者：

下面都是默認(rèn)一樣大小的方塊，當(dāng)鼠標(biāo)放到你想要放的位置，則當(dāng)前位置的方塊則放大。

效果如下圖:

實現(xiàn)代碼:運行后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 方塊隨著鼠標(biāo)所在的區(qū)域而放大 </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> <div   id="3t1nzfl"   class="dock"></div> <script language="javascript" type="text/javascript"> //配置 var m=5;//最大倍數(shù) var s=400;//距中心最大距離 var count=20;//個數(shù) //Dock類 function Dock(){ this.dockItems=[]; this.addItem=function(item){ this.dockItems.push($(item)); $(item).appendTo(".dock"); }; } //生成Dock對象實例 var d=new Dock(); //循環(huán)插入count個dockItem dom對象 for(var i=0;i<count;i++){ d.addItem('<div   id="3llfbhx"   class="'+i+'"></div>'); } //綁定dockItem函數(shù) $(".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"}); } } //計算放大倍數(shù) 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需再刷新一下頁面才能執(zhí)行]

相關(guān)文章

jQuery學(xué)習(xí)總結(jié)之jQuery事件
今天總結(jié)一下jQuery事件，這是比較重要的一塊，希望本次總結(jié)能幫助到很多同我一樣的新手
2014-06-06
jQuery創(chuàng)建自定義的選擇器用以選擇高度大于100的超鏈接實例
這篇文章主要介紹了jQuery創(chuàng)建自定義的選擇器用以選擇高度大于100的超鏈接,實例分析了jQuery自定義選擇器的使用技巧,非常具有實用價值,需要的朋友可以參考下
2015-03-03
JQuery+EasyUI輕松實現(xiàn)步驟條效果
jQuery EasyUI 提供易于使用的組件，它使 Web 開發(fā)人員能快速地在流行的 jQuery 核心和 HTML5 上建立程序頁面。通過本文給大家介紹JQuery+EasyUI輕松實現(xiàn)步驟條效果，需要的朋友參考下
2016-02-02
jQuery實現(xiàn)折線圖的方法
這篇文章主要介紹了jQuery實現(xiàn)折線圖的方法,涉及jQuery及相關(guān)插件的使用技巧,非常具有實用價值,需要的朋友可以參考下
2015-02-02
jquery div 居中技巧應(yīng)用介紹
在項目實戰(zhàn)中碰到了一些問題，例如，jquery如何使div居中，此問題一直困擾著我，因此尋找了一些方法，曬出來和大家分享一下
2012-11-11
MVC Ajax Helper或Jquery異步加載部分視圖
這篇文章主要介紹了MVC Ajax Helper或Jquery異步加載部分視圖的相關(guān)資料,需要的朋友可以參考下
2015-11-11
bootstrap與Jquery UI 按鈕樣式?jīng)_突的解決辦法
這篇文章主要介紹了bootstrap與Jquery UI 按鈕樣式?jīng)_突的解決辦法的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-09-09
jQuery實現(xiàn)的自定義彈出層效果實例詳解
這篇文章主要介紹了jQuery實現(xiàn)的自定義彈出層效果,結(jié)合實例形式較為詳細(xì)的分析了jQuery自定義彈出層的布局、事件響應(yīng)與頁面元素動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下
2016-09-09
jQuery源碼分析之sizzle選擇器詳解
jquery從1.3開始，使用了新的選擇器–sizzle。效率超過了以前的jquery版本的其他選擇器。下面這篇文章主要介紹了jQuery源中sizzle選擇器的相關(guān)資料，文中介紹的很詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-02-02
jQuery Json數(shù)據(jù)格式排版高亮插件json-viewer.js使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jQuery Json數(shù)據(jù)格式排版高亮插件json-viewer.js的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06