仿苹果菜单
前几天在妙味课堂看到了苹果菜单的代码，所以就分析了一下，主要是用到了Math对象的几个方法和offset的几个属性。下面具体分析苹果菜单的实现！！！效果图
原理：以图片的中心点为轴，当鼠标在文档中移动时，构建一个三角形，两条直角边分别是鼠标到以图片中心为直径的两条垂径（不知道是不是这样叫的）利用勾股定理来求出斜边如图所示：
说实话用图没搞过，不知道用什么软件，郁闷弄了半天才搞出这么哥破图
在这里有必要提下这里div使用了绝对定位所以offsetParent要注意一下（offsetParent:是指元素最近的定位（relative,absolute）祖先元素，如果没有祖先元素是定位的话，会指向body元素）完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿苹果菜单</title>
<style type="text/css">
*{ margin:0; padding:0;}
#div1{ width:800px; position:absolute; bottom:0; left:500px;}
</style>
<script type="text/javascript">
document.onmousemove=function(ev){
var ev=ev||event;
var div1=document.getElementById("div1");
var img=div1.getElementsByTagName("img");
var d=0;
var m=200;//这里的m是定义鼠标在文档移动时图片开始变化的范围，值越大的话，离图片很远就能使图片变化，越小就要离得越近才能变化
function getDistance(obj){
return Math.sqrt(
Math.pow(obj.offsetLeft+div1.offsetLeft+obj.offsetWidth/2-ev.clientX,2)+Math.pow(obj.offsetTop+div1.offsetTop+obj.offsetHeight/2-ev.clientY,2)
)
}
for(var i=0;i<img.length;i++){
var d=getDistance(img[i]);
var d=Math.min(m,d);
img[i].width=((m-d)/m)*64+64;
}
}
</script>
</head>
<body>
<div id="div1">
<img src="1.png" width="64">
<img src="2.png" width="64">
<img src="3.png" width="64">
<img src="4.png" width="64">
<img src="5.png" width="64">
</div>
</body>
</html>
