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

這是靜態的效果圖，好吧，看上去還想模像樣

下面是HTML頁面的代碼：

/p>

"http://www.w3.org/TR/html4/strict.dtd">

JQueryProject1

沒有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也出來了。

懇請各位走過路過的高手、大神們，提出寶貴的修改意見及更好的算法，謝謝觀賞。

總結

以上是生活随笔為你收集整理的html5 苹果 dock,基于JQuery模仿苹果桌面的Dock效果(初级版)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。