基于JQuery模仿蘋(píng)果桌面的Dock效果(初級(jí)版)
新的一天新的開(kāi)始,今天要分享的是用JQuery模仿蘋(píng)果操作系統(tǒng)桌面的Dock效果,之所以稱(chēng)之為初級(jí)版,是因?yàn)槠渲羞€有一些bug,顯示效果并不穩(wěn)定。由于時(shí)間的關(guān)系,這些bug還沒(méi)有修復(fù),希望高手們不吝賜教,提出更好的意見(jiàn),希望可以做出更好的版本分享給大家。
這是靜態(tài)的效果圖,好吧,看上去還想模像樣
下面是HTML頁(yè)面的代碼:
<!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>
沒(méi)有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í)的算法,還沒(méi)有加入鼠標(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àn)及更好的算法,謝謝觀賞。
相關(guān)文章
使用JS代碼實(shí)現(xiàn)點(diǎn)擊按鈕下載文件
有時(shí)候我們?cè)诰W(wǎng)頁(yè)上需要增加一個(gè)下載按鈕,讓用戶能夠點(diǎn)擊后下載頁(yè)面上的資料,那么怎樣才能實(shí)現(xiàn)功能呢?今天小編給大家分享兩種方法實(shí)現(xiàn)js實(shí)現(xiàn)點(diǎn)擊按鈕下載文件,需要的朋友參考下吧2016-11-11Javascript如何判斷數(shù)據(jù)類(lèi)型和數(shù)組類(lèi)型
這篇文章主要介紹Javascript如何判斷數(shù)據(jù)類(lèi)型和數(shù)組類(lèi)型,通俗易懂,需要的朋友可以參考下。2016-06-06uniapp中canvas繪制圖片內(nèi)容空白報(bào)錯(cuò)的原因及解決
最近有個(gè)需求就是要用canvas畫(huà)個(gè)分享的海報(bào),所以這里總結(jié)下,這篇文章主要給大家介紹了關(guān)于uniapp中canvas繪制圖片內(nèi)容空白報(bào)錯(cuò)的原因及解決方法,需要的朋友可以參考下2023-09-09WEB前端開(kāi)發(fā)框架Bootstrap3 VS Foundation5
WEB前端開(kāi)發(fā)框架Bootstrap3 VS Foundation5,這篇文章主要介紹了Bootstrap3與Foundation5的五大區(qū)別,感興趣的小伙伴們可以參考一下2016-05-05vue組件中watch props根據(jù)v-if動(dòng)態(tài)判斷并掛載DOM的問(wèn)題
這篇文章主要介紹了vue組件中watch props根據(jù)v-if動(dòng)態(tài)判斷并掛載DOM的問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05一個(gè)很酷的拖動(dòng)層的js類(lèi),兼容IE及Firefox
自己優(yōu)化修改了網(wǎng)上的一個(gè)JS拖動(dòng)類(lèi),增加了拖動(dòng)時(shí)顯示半透明的特效。2009-06-06用jmSlip編寫(xiě)移動(dòng)端頂部日歷選擇控件
這篇文章主要為大家詳細(xì)介紹了利用jmSlip編寫(xiě)移動(dòng)端頂部日歷選擇組件的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10