已经迫不及待的想要将我的最新成果分享给大家了，其实代码和之前的版本很相似。
首相是html页面代码：
复制代码 代码如下:
jquery dock
同样加上相应的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(mousey8){
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(xobj.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 ，当 标签中间的内容为 时如果没有给 img 的 border 的任何css样式，则 ie 会给 img 加上蓝色边框，即使给 标签加上 text-decoration: none; 的css样式，img 仍然会被 ie 加上蓝色边框，当给 img 添加 border:none; 之后烦人的蓝色边框就不见了。下图是改进过后版本的演示图，所有代码仅供参考，谢谢阅读。