快捷導(dǎo)航

基于JQuery的模擬蘋果桌面Dock效果(穩(wěn)定版)

更新時(shí)間：2012年10月15日 16:00:32 作者：

之所以將它命名為穩(wěn)定版，是因?yàn)橹耙呀?jīng)分享了一個(gè)初級(jí)版本的，之前的初級(jí)版中存在很多bug。現(xiàn)在經(jīng)過(guò)反復(fù)琢磨、實(shí)驗(yàn)，修復(fù)了之前版本存在的很多不足之處，就算鼠標(biāo)快速的滑動(dòng)依然表現(xiàn)的很穩(wěn)定

已經(jīng)迫不及待的想要將我的最新成果分享給大家了，其實(shí)代碼和之前的版本很相似。

首相是HTML頁(yè)面代碼：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html> 
<html lang="zh-cmn-Hans-CN"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>jQuery Dock</title> 
<link type="text/css" rel="stylesheet" href="css/dock.css" /> 
<script type="text/javascript" src="js/jquery-1.8.0.js"></script> 
<script type="text/javascript" src="js/dock.js"></script> 
</head> 
<body id="content"> 
<div id="topBody" align="center"> 
<div id="topMenu"> 
<a href="#"><img alt="Home" src="images/home.png" /></a> 
<a href="#"><img alt="Music" src="images/music.png" /></a> 
<a href="#"><img alt="Calendar" src="images/calendar.png" /></a> 
<a href="#"><img alt="Email" src="images/email.png" /></a> 
<a href="#"><img alt="Portfolio" src="images/portfolio.png" /></a> 
<a href="#"><img alt="Video" src="images/video.png" /></a> 
<a href="#"><img alt="Link" src="images/link.png" /></a> 
<a href="#"><img alt="History" src="images/history.png" /></a> 
<a href="#"><img alt="RSS" src="images/rss.png" /></a> 
</div> 
</div> 
</body> 
</html> 

同樣加上相應(yīng)的CSS代碼：

復(fù)制代碼代碼如下:

 
#topMenu{ 
height:128px; 
line-height:250px; 
width: 630px; 
background-image:url(../images/dock-bg1.png); 
} 
#topMenu img{ 
width: 50px; 
height:50px; 
border:none; 
} 

對(duì)應(yīng)的JS代碼如下：

復(fù)制代碼代碼如下:

 
$(function(){ 
$(this).mousemove(function(e){ 
var mouseY = parseInt(e.pageY); 
if(mouseY<136 && mouseY>8){ 
var mouseX = parseInt(e.pageX); 
$("#topMenu img").each(function(){ 
var obj = $(this); 
var objWidth = obj.css("width"); 
//獲取圖片中心水平坐標(biāo) 
var objX = parseInt(obj.offset().left) + parseInt(objWidth.substr(0,objWidth.length-2))/2; 
var x = Math.abs(objX-mouseX); 
if(x<75){ 
obj.css("width",(128-((78*x*x)/(75*75)))+"px").css("height",(128-((78*x*x)/(75*75)))+"px"); 
}else{ 
obj.css("width","50px").css("height","50px"); 
} 
}); 
}else{ 
$("#topMenu img").each(function(){ 
$(this).css("width","50px").css("height","50px"); 
}); 
} 
}); 
}); 

相比于之前的版本最大的改變還是在JS上面，當(dāng)鼠標(biāo)在頁(yè)面上移動(dòng)時(shí)觸發(fā)mousemove事件，在mousemove方法中首先取得鼠標(biāo)在頁(yè)面上的垂直坐標(biāo)，判斷鼠標(biāo)是否在可操作dock菜單的垂直范圍之內(nèi)，如果鼠標(biāo)不在這個(gè)范圍之內(nèi)，就將所有圖標(biāo)還原到初始狀態(tài)；相反，如果鼠標(biāo)在這個(gè)范圍之內(nèi)，就繼續(xù)獲取鼠標(biāo)在頁(yè)面上的水平坐標(biāo)，并用mouseX來(lái)記錄。同時(shí)獲取圖片中心在頁(yè)面中的水平坐標(biāo)，用objX來(lái)保存相應(yīng)的值，當(dāng)mouseX與objX之差的絕對(duì)值(用x來(lái)記錄)小于75時(shí)，就進(jìn)入了當(dāng)前圖片的可操作范圍，dock效果就會(huì)觸發(fā)，用y來(lái)表示當(dāng)鼠標(biāo)移動(dòng)時(shí)某一張圖片的width(為了簡(jiǎn)單本次示例使用的圖標(biāo)width和height相等的)，本次示例用了方程 y=128-78*x2/752來(lái)表示鼠標(biāo)的位置與圖片尺寸之間的關(guān)系，當(dāng) x 的大于75時(shí)就將對(duì)應(yīng)的圖片還原。
在本次示例的過(guò)程中發(fā)現(xiàn)了一個(gè) ie 的一個(gè)小 bug ，當(dāng) <a> 標(biāo)簽中間的內(nèi)容為 <img /> 時(shí)如果沒(méi)有給 img 的 border 的任何CSS樣式，則 ie 會(huì)給 img 加上藍(lán)色邊框，即使給 <a> 標(biāo)簽加上 text-decoration: none; 的CSS樣式，img 仍然會(huì)被 ie 加上藍(lán)色邊框，當(dāng)給 img 添加 border:none; 之后煩人的藍(lán)色邊框就不見(jiàn)了。下圖是改進(jìn)過(guò)后版本的演示圖，所有代碼僅供參考，謝謝閱讀。