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

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

下面是HTML頁(yè)面的代碼：

/p>

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

JQueryProject1

沒有CSS裝飾的頁(yè)面那叫一個(gè)慘不忍睹，所以使用適當(dāng)?shù)腃SS進(jìn)行裝飾是必不可少的

#topBody{

height: 300px;

}

#topMenu{

height: 256px;

line-height: 256px;

}

#topMenu img{

height: 50px;

width: 50px;

}

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

$(function(){

$("#topBody").mousemove(function(e){

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 && x>-75){

obj.css("width",(128-((78*x*x)/(75*75)))+"px");

obj.css("height",(128-((78*x*x)/(75*75)))+"px");

}

});

});

});

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

當(dāng)鼠標(biāo)移動(dòng)速度比較慢時(shí)顯示效果還可以接受，不過(guò)當(dāng)鼠標(biāo)快速移動(dòng)時(shí)時(shí)圖標(biāo)是放大了，不過(guò)相應(yīng)的bug也出來(lái)了。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。