苹果桌面图标效果是个鼠标移上去，图标变大，距离鼠标越远则图标的大小越接近于原始大小，越近则越大！
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>苹果菜单</title> <style type="text/css"> body { margin: 0; padding: 0; } #div1 { width: 100%; position: absolute; bottom: 0; text-align: center; } </style> </head> <body> <div id="div1"> <img src="img/1.jpg" width="64" /> <img src="img/2.jpg" width="64" /> <img src="img/3.jpg" width="64" /> <img src="img/4.jpg" width="64" /> <img src="img/5.jpg" width="64" /> </div> <script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> /* document.onmousemove = function(e) { e = e || event; var aImgs = document.getElementsByTagName('img'), oDiv=document.getElementById('div1'); for (var i = 0, l = aImgs.length; i < l; i++) { //计算鼠标当前位置与各图片中心位置在x,y轴方向的距离 var a=aImgs[i].offsetLeft+aImgs[i].offsetWidth/2-e.clientX, b=aImgs[i].offsetTop+aImgs[i].offsetHeight/2+oDiv.offsetTop-e.clientY; //两点之间的距离 var dis=Math.sqrt(a*a+b*b); var scale=(1-dis/600).toFixed(2); //距离越小则图片越大 if(scale<0.5){ scale=0.5; //防止图片直接消失 } aImgs[i].width=scale*128; } };*/ $(document).mousemove(function(e){ var aDis=[]; //计算鼠标当前位置与图片中心位置的距离，距离越小则图片越大，否则越小 $('img').each(function(k,v){ var x=e.pageX-$(this).offset().left, y=e.pageY-$(this).offset().top, dis=Math.sqrt(x*x+y*y); aDis.push(parseInt(dis)); }); var max=Math.max.apply(Math,aDis); $.each(aDis, function(k,v) { var scale=1-v/max; //防止图片消失 if(scale<0.5){ scale=0.5; } $('img').eq(k).width(128*scale); }); }); </script> </body> </html>