新的一天新的開始，今天要分享的是用JQuery模仿蘋果操作系統桌面的Dock效果，之所以稱之為初級版，是因為其中還有一些bug，顯示效果並不穩定。由於時間的關系，這些bug還沒有修復，希望高手們不吝賜教，提出更好的意見，希望可以做出更好的版本分享給大家。
這是靜態的效果圖，好吧，看上去還想模像樣
下面是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裝飾的頁面那叫一個慘不忍睹，所以使用適當的CSS進行裝飾是必不可少的
復制代碼 代碼如下:
#topBody{
height: 300px;
}
#topMenu{
height: 256px;
line-height: 256px;
}
#topMenu img{
height: 50px;
width: 50px;
}
才畢業幾個月，解方程都忘記了，所以當鼠標移動時圖標的放大算法讓我很頭疼啊，這裡給出的算法只是個人想法，僅供參考，希望各位高手提出更好的算法。而且這裡只考慮了鼠標在水平位置移動時的算法，還沒有加入鼠標垂直移動式的算法。
復制代碼 代碼如下:
$(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獲取鼠標的方法，當執行mousemove(function(e){})這個方法是，方法的參數e提供了e.pageX獲取水平坐標、e.pageY獲取垂直坐標，同時也可以使用var x = e.originalEvent.x || e.originalEvent.layerX || 0;獲取鼠標的水平位置、同樣可以用 var y = e.originalEvent.y || e.originalEvent.layerY || 0;獲取鼠標的垂直位置。
當鼠標移動速度比較慢時顯示效果還可以接受，不過當鼠標快速移動時時圖標是放大了，不過相應的bug也出來了。
懇請各位走過路過的高手、大神們，提出寶貴的修改意見及更好的算法，謝謝觀賞。