新的一天，新的开始。今天想和大家分享一下用JQuery模仿苹果操作系统桌面的Dock效果。之所以叫初级版，是因为里面还有一些bug，显示效果不稳定。由于时间关系，这些bug还没有修复。希望专家们能给我们建议，给我们更好的意见，希望能做出更好的版本与大家分享。这是一个静态渲染，嗯，看起来还是不错的。

以下是HTML页面的代码：复制代码如下：DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN ' ' http://www . w3 . org/TR/HTML 4/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 jqueryproject 1/title meta name=' author ' content=' Frank _ Ren '/link type=' text/CSS ' rel='样式表' href='css/myCSS.css' /脚本类型=' text/JavaScript ' src=' http : js/jquery-1 . 4 . 2 . js '/脚本脚本脚本类型=' text/JavaScript ' language=' JavaScript ' src=' http 3366-date : 2012-09-17-/head body div id=' topBody ' align=' center ' P id=' topMenu ' align=' center ' img alt=' Home ' src=' http : images/Home . png '/img alt=' Music ' src=' http : images/Music . png '/img alt=' Email '复制代码如下： # topBody { height : 300 px；} # topMenu { height: 256px线高： 256 px；} # topMenu img { height: 50px宽度： 50px；}我才毕业几个月，忘记解方程了，鼠标移动时放大图标的算法让我头疼。这里给出的算法只是个人想法，仅供参考。希望各位专家能提出更好的算法。而且这里只考虑了鼠标在水平位置移动时的算法，没有加入鼠标垂直移动的算法。复制代码如下： $ (function () {$ ('# topbody ')。mousemove(函数(e){ var mousex=par sent(e . pagex)；$('#topMenu img ')。每个(function(){ var obj=$(this)；var objWidth=obj . CSS(' width ')；//获取水平坐标var objx=par sent(obj . offset()。left)parse int(objwidth . substr(0，objwidth . length-2))/2；var x=Math . ABS(ObJx-MouseX)；if(x75 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){})时，方法的参数e提供e.pageX获取水平坐标，e.pageY获取垂直坐标，也可以使用var x=e . originalevent . x | | e . originalevent . layerx | | 0；要获取鼠标的水平位置，还可以使用var y=e . originalevent . y | | e . originalevent . layery | | 0；获取鼠标的垂直位置。

鼠标移动慢时，显示效果可以接受，但鼠标移动快时，图标会放大，但会出现相应的bug。

恳请各位路过的大师大神提出宝贵的修改意见和更好的算法。谢谢观看。