快捷導航

基于JQuery模仿蘋果桌面的Dock效果(初級版)

更新時間：2012年10月15日 15:54:37 作者：

新的一天新的開始，今天要分享的是用JQuery模仿蘋果操作系統(tǒng)桌面的Dock效果，之所以稱之為初級版，是因為其中還有一些bug，顯示效果并不穩(wěn)定

新的一天新的開始，今天要分享的是用JQuery模仿蘋果操作系統(tǒng)桌面的Dock效果，之所以稱之為初級版，是因為其中還有一些bug，顯示效果并不穩(wěn)定。由于時間的關(guān)系，這些bug還沒有修復，希望高手們不吝賜教，提出更好的意見，希望可以做出更好的版本分享給大家。

這是靜態(tài)的效果圖，好吧，看上去還想模像樣

下面是HTML頁面的代碼：

復制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JQueryProject1</title> 
<meta name="author" content="Frank_Ren" /> 
<link type="text/css" rel="stylesheet" href="css/myCSS.css" /> 
<script type="text/javascript" src="js/jquery-1.4.2.js"></script> 
<script type="text/javascript" language="JavaScript" src="js/myJSFile.js"></script> 
<!-- Date: 2012-09-17 --> 
</head> 
<body> 
<div id="topBody" align="center"> 
<p id="topMenu" align="center"> 
<img alt="Home" src="images/home.png" /> 
<img alt="Music" src="images/music.png" /> 
<img alt="Calendar" src="images/calendar.png" /> 
<img alt="Email" src="images/email.png" /> 
<img alt="Portfolio" src="images/portfolio.png" /> 
<img alt="Video" src="images/video.png" /> 
<img alt="Link" src="images/link.png" /> 
<img alt="History" src="images/history.png" /> 
<img alt="RSS" src="images/rss.png" /> 
</p> 
</div> 
</body> 
</html> 

沒有CSS裝飾的頁面那叫一個慘不忍睹，所以使用適當?shù)腃SS進行裝飾是必不可少的

復制代碼代碼如下:

 
#topBody{ 
height: 300px; 
} 
#topMenu{ 
height: 256px; 
line-height: 256px; 
} 
#topMenu img{ 
height: 50px; 
width: 50px; 
} 

才畢業(yè)幾個月，解方程都忘記了，所以當鼠標移動時圖標的放大算法讓我很頭疼啊，這里給出的算法只是個人想法，僅供參考，希望各位高手提出更好的算法。而且這里只考慮了鼠標在水平位置移動時的算法，還沒有加入鼠標垂直移動式的算法。

復制代碼代碼如下:

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

說說JQuery獲取鼠標的方法，當執(zhí)行mousemove(function(e){})這個方法是，方法的參數(shù)e提供了e.pageX獲取水平坐標、e.pageY獲取垂直坐標，同時也可以使用var x = e.originalEvent.x || e.originalEvent.layerX || 0;獲取鼠標的水平位置、同樣可以用 var y = e.originalEvent.y || e.originalEvent.layerY || 0;獲取鼠標的垂直位置。