基於JQuery模仿蘋果桌面的Dock效果(初級版)_javascript技巧

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

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

以下是HTML頁面的程式碼：

複製程式碼 程式碼如下:

程式碼如下:


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

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

複製代碼

複製代碼



複製代碼



複製代碼

程式碼如下:

#topBody{ height: 300px; } #topMenu{ height: 256p}

#topMenu img{

height: 50px;
width: 50px;
}


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




複製程式碼


程式碼如下:


$(function(){

$(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.substrobjWidth.substrobjWidth.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");

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也出來了。 懇請各位走過路過的高手、大神們，提出寶貴的修改意見及更好的演算法，謝謝觀賞。