使用jQuery实现仿苹果Dock栏放大效果（初级版）

jQuery仿苹果Dock效果实现

今日分享如何利用jQuery实现仿苹果操作系统桌面的Dock栏效果。该版本被定义为初级版，主要因为目前仍存在部分Bug，导致显示效果不够稳定。受限于时间，这些缺陷尚未修复，特此公开代码，期待技术高手提供优化建议，共同完善此版本。

以下是静态展示效果，整体视觉呈现已具备一定雏形。

接下来展示HTML页面的基础结构代码。

 
<!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修饰的页面视觉效果较差，因此必须引入合适的CSS样式进行美化。

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

图标放大算法与鼠标交互逻辑

刚毕业不久，数学解方程的能力有所退化，因此图标放大的算法实现曾让我感到困扰。此处提供的算法仅为个人思路，仅供参考，欢迎高手提出更优方案。此外，当前实现仅考虑了鼠标水平移动的情况，尚未加入垂直移动的算法支持。

 
$(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.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获取鼠标位置的方法：在mousemove事件回调中，参数e提供了pageX属性获取水平坐标、pageY属性获取垂直坐标。此外，也可通过var x = e.originalEvent.x || e.originalEvent.layerX || 0;获取水平位置，通过var y = e.originalEvent.y || e.originalEvent.layerY || 0;获取垂直位置。

当鼠标移动速度较慢时，显示效果尚可接受；但当鼠标快速移动时，虽然图标会放大，但相应的Bug也会显现。

恳请各位技术高手提出宝贵的修改意见及更优算法，感谢阅读。