详解基于javascript实现的苹果系统底部菜单(2)

document.onmousemove=function (ev) { var oEvent=ev||event; var oDiv=document.getElementById('div1'); var aImg=oDiv.getElementsByTagName('img'); var d=0; var iMax=200; var i=0; function getDistance(obj) { return Math.sqrt ( Math.pow(obj.offsetLeft+oDiv.offsetLeft-oEvent.clientX+obj.offsetWidth/2, 2)+ Math.pow(obj.offsetTop+oDiv.offsetTop-oEvent.clientY+obj.offsetHeight/2, 2) ); } for(i=0;i<aImg.length;i++) { d=getDistance(aImg[i]); d=Math.min(d,iMax); aImg[i].width=((iMax-d)/iMax)*64+64; } };

<divid="div1"> <ahref="http://www.miaov.com/"><imgsrc="images/1.png" longdesc="妙味课堂" alt="妙味课堂" title="妙味课堂" /></a> <ahref="http://www.miaov.com/"><imgsrc="images/2.png" longdesc="妙味课堂" alt="妙味课堂" title="妙味课堂" /></a> <ahref="http://www.miaov.com/"><imgsrc="images/3.png" longdesc="妙味课堂" alt="妙味课堂" title="妙味课堂" /></a> <ahref="http://www.miaov.com/"><imgsrc="images/4.png" longdesc="妙味课堂" alt="妙味课堂" title="妙味课堂" /></a> <ahref="http://www.miaov.com/"><imgsrc="images/5.png" longdesc="妙味课堂" alt="妙味课堂" title="妙味课堂" /></a> </div> body {margin:0px;} #div1 {text-align:center;bottom:0px; position:relative; width:500px; margin:0 auto; border:1px solid red;} #div1 img {border:none;}

三、总结

　1.要获得任意两点之间的距离值，通过【勾肌定理】直角三角形的两直角边的平方和等于斜边的平方这一特性（X2+Y2=Z2）；

　2. (iMax-Z)/iMax ，和比例有关的算法，结合加法或减法、除法、乘法；

　　减法：一个数不变，另一个数变大，结果越小；反之越大；

　　加法：一个数不变，另一个数变大，结果越大；反之越小；

　3. 有图片变化的效果，或都说是形状变化效果的时候，是不是应该先抽象成基本的形状，如点、线，面：三角形，正方形矩形，圆，平形四边形。然后找规律，多观察那些变化，那些没有变，熟悉或查找相关实例所涉及到的定理公式。慢慢的推导出效果。