欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于JQuery模仿蘋果桌面的Dock效果(初級版)

 更新時間:2012年10月15日 15:54:37   作者:  
新的一天新的開始,今天要分享的是用JQuery模仿蘋果操作系統(tǒng)桌面的Dock效果,之所以稱之為初級版,是因為其中還有一些bug,顯示效果并不穩(wěn)定

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

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

下面是HTML頁面的代碼:

復(fù)制代碼 代碼如下:

<!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裝飾的頁面那叫一個慘不忍睹,所以使用適當(dāng)?shù)腃SS進行裝飾是必不可少的
復(fù)制代碼 代碼如下:

#topBody{
height: 300px;
}
#topMenu{
height: 256px;
line-height: 256px;
}
#topMenu img{
height: 50px;
width: 50px;
}

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

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

說說JQuery獲取鼠標(biāo)的方法,當(dāng)執(zhí)行mousemove(function(e){})這個方法是,方法的參數(shù)e提供了e.pageX獲取水平坐標(biāo)、e.pageY獲取垂直坐標(biāo),同時也可以使用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)鼠標(biāo)快速移動時時圖標(biāo)是放大了,不過相應(yīng)的bug也出來了。

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

相關(guān)文章

最新評論