基於JQuery的模擬蘋果桌面Dock效果(穩定版)
編輯：JQuery特效代碼
已經迫不及待的想要將我的最新成果分享給大家了，其實代碼和之前的版本很相似。
首相是HTML頁面代碼：
. 代碼如下:
<!DOCTYPE html>
<html lang="zh-cmn-Hans-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Dock</title>
<link type="text/css" rel="stylesheet" href="css/dock.css" />
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/dock.js"></script>
</head>
<body id="content">
<div id="topBody" align="center">
<div id="topMenu">
<a href="#"><img alt="Home" src="images/home.png" /></a>
<a href="#"><img alt="Music" src="images/music.png" /></a>
<a href="#"><img alt="Calendar" src="images/calendar.png" /></a>
<a href="#"><img alt="Email" src="images/email.png" /></a>
<a href="#"><img alt="Portfolio" src="images/portfolio.png" /></a>
<a href="#"><img alt="Video" src="images/video.png" /></a>
<a href="#"><img alt="Link" src="images/link.png" /></a>
<a href="#"><img alt="History" src="images/history.png" /></a>
<a href="#"><img alt="RSS" src="images/rss.png" /></a>
</div>
</div>
</body>
</html>
同樣加上相應的CSS代碼：
. 代碼如下:
#topMenu{
height:128px;
line-height:250px;
width: 630px;
background-image:url(../images/dock-bg1.png);
}
#topMenu img{
width: 50px;
height:50px;
border:none;
}
對應的JS代碼如下：
. 代碼如下:
$(function(){
$(this).mousemove(function(e){
var mouseY = parseInt(e.pageY);
if(mouseY<136 && mouseY>8){
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){
obj.css("width",(128-((78*x*x)/(75*75)))+"px").css("height",(128-((78*x*x)/(75*75)))+"px");
}else{
obj.css("width","50px").css("height","50px");
}
});
}else{
$("#topMenu img").each(function(){
$(this).css("width","50px").css("height","50px");
});
}
});
});
相比於之前的版本最大的改變還是在JS上面，當鼠標在頁面上移動時觸發mousemove事件，在mousemove方法中首先取得鼠標在頁面上的垂直坐標，判斷鼠標是否在可操作dock菜單的垂直范圍之內，如果鼠標不在這個范圍之內，就將所有圖標還原到初始狀態；相反，如果鼠標在這個范圍之內，就繼續獲取鼠標在頁面上的水平坐標，並用mouseX來記錄。同時獲取圖片中心在頁面中的水平坐標，用objX來保存相應的值，當mouseX與objX之差的絕對值(用x來記錄)小於75時，就進入了當前圖片的可操作范圍，dock效果就會觸發，用y來表示當鼠標移動時某一張圖片的width(為了簡單本次示例使用的圖標width和height相等的)，本次示例用了方程 y=128-78*x2/752來表示鼠標的位置與圖片尺寸之間的關系，當 x 的大於75時就將對應的圖片還原。
在本次示例的過程中發現了一個 ie 的一個小 bug ，當 <a> 標簽中間的內容為 <img /> 時如果沒有給 img 的 border 的任何CSS樣式，則 ie 會給 img 加上藍色邊框，即使給 <a> 標簽加上 text-decoration: none; 的CSS樣式，img 仍然會被 ie 加上藍色邊框，當給 img 添加 border:none; 之後煩人的藍色邊框就不見了。下圖是改進過後版本的演示圖，所有代碼僅供參考，謝謝閱讀。
首相是HTML頁面代碼：
. 代碼如下:
<!DOCTYPE html>
<html lang="zh-cmn-Hans-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Dock</title>
<link type="text/css" rel="stylesheet" href="css/dock.css" />
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/dock.js"></script>
</head>
<body id="content">
<div id="topBody" align="center">
<div id="topMenu">
<a href="#"><img alt="Home" src="images/home.png" /></a>
<a href="#"><img alt="Music" src="images/music.png" /></a>
<a href="#"><img alt="Calendar" src="images/calendar.png" /></a>
<a href="#"><img alt="Email" src="images/email.png" /></a>
<a href="#"><img alt="Portfolio" src="images/portfolio.png" /></a>
<a href="#"><img alt="Video" src="images/video.png" /></a>
<a href="#"><img alt="Link" src="images/link.png" /></a>
<a href="#"><img alt="History" src="images/history.png" /></a>
<a href="#"><img alt="RSS" src="images/rss.png" /></a>
</div>
</div>
</body>
</html>
同樣加上相應的CSS代碼：
. 代碼如下:
#topMenu{
height:128px;
line-height:250px;
width: 630px;
background-image:url(../images/dock-bg1.png);
}
#topMenu img{
width: 50px;
height:50px;
border:none;
}
對應的JS代碼如下：
. 代碼如下:
$(function(){
$(this).mousemove(function(e){
var mouseY = parseInt(e.pageY);
if(mouseY<136 && mouseY>8){
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){
obj.css("width",(128-((78*x*x)/(75*75)))+"px").css("height",(128-((78*x*x)/(75*75)))+"px");
}else{
obj.css("width","50px").css("height","50px");
}
});
}else{
$("#topMenu img").each(function(){
$(this).css("width","50px").css("height","50px");
});
}
});
});
相比於之前的版本最大的改變還是在JS上面，當鼠標在頁面上移動時觸發mousemove事件，在mousemove方法中首先取得鼠標在頁面上的垂直坐標，判斷鼠標是否在可操作dock菜單的垂直范圍之內，如果鼠標不在這個范圍之內，就將所有圖標還原到初始狀態；相反，如果鼠標在這個范圍之內，就繼續獲取鼠標在頁面上的水平坐標，並用mouseX來記錄。同時獲取圖片中心在頁面中的水平坐標，用objX來保存相應的值，當mouseX與objX之差的絕對值(用x來記錄)小於75時，就進入了當前圖片的可操作范圍，dock效果就會觸發，用y來表示當鼠標移動時某一張圖片的width(為了簡單本次示例使用的圖標width和height相等的)，本次示例用了方程 y=128-78*x2/752來表示鼠標的位置與圖片尺寸之間的關系，當 x 的大於75時就將對應的圖片還原。
在本次示例的過程中發現了一個 ie 的一個小 bug ，當 <a> 標簽中間的內容為 <img /> 時如果沒有給 img 的 border 的任何CSS樣式，則 ie 會給 img 加上藍色邊框，即使給 <a> 標簽加上 text-decoration: none; 的CSS樣式，img 仍然會被 ie 加上藍色邊框，當給 img 添加 border:none; 之後煩人的藍色邊框就不見了。下圖是改進過後版本的演示圖，所有代碼僅供參考，謝謝閱讀。
小編推薦
熱門推薦