动感缩放图标菜单
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>无标题文档</title> 7 8 9 <script type="text/javascript"> 10 11 document.onmousemove=function (ev) 12 { 13 var oEvent=ev||event; 14 var oDiv=document.getElementById('div1'); 15 var aImg=oDiv.getElementsByTagName('img'); 16 var d=0; 17 var iMax=200; 18 var i=0; 19 20 function getDistance(obj) 21 { 22 return Math.sqrt 23 ( 24 Math.pow(obj.offsetLeft+oDiv.offsetLeft-oEvent.clientX+obj.offsetWidth/2, 2)+ 25 Math.pow(obj.offsetTop+oDiv.offsetTop-oEvent.clientY+obj.offsetHeight/2, 2) 26 ); 27 } 28 29 for(i=0;i<aImg.length;i++) 30 { 31 d=getDistance(aImg[i]); 32 d=Math.min(d, iMax); 33 34 aImg[i].width=((iMax-d)/iMax)*64+64; 35 } 36 }; 37 38 </script> 39 <style type="text/css"> 40 41 body {margin:0px;} 42 #div1 {text-align:center; position:absolute; bottom:0px; width:100%;} 43 </style> 44 </head> 45 46 <body> 47 <div id="div1"> 48 <img src="http://images.cnblogs.com/cnblogs_com/aypnia/511966/o_1.png" width="64" /> 49 <img src="http://images.cnblogs.com/cnblogs_com/aypnia/511966/o_2.png" width="64" /> 50 <img src="http://images.cnblogs.com/cnblogs_com/aypnia/511966/o_3.png" width="64" /> 51 <img src="http://images.cnblogs.com/cnblogs_com/aypnia/511966/o_4.png" width="64" /> 52 <img src="http://images.cnblogs.com/cnblogs_com/aypnia/511966/o_5.png" width="64" /> 53 </div> 54 </body> 55 </html>
学习新得：1；远原理就是计算出 鼠标距离元素圆心的距离，当靠近一定值时，图片的width变大，2，首先CSS 设置text-align:center;利于浮动；3，对象是document，因为鼠标要在整个文档穿梭，4，计算出图片的左和上的坐标，可以用obj.offsetLeft+oDiv.offsetLef+obj.offsetWidth/2，来计算 ，鼠标的是var oEvent=e||event;oEvent.clientX，5，计算两点之间的距离 用公式Math.sqrt（Math.pow（（a-a1），2）+Math.pow（(b-b1)，2））,6用for循环给每个元素添加数据，取计算出的距离与设定的距离的最小值 ，通过aImg[i].width=((iMax-d)/iMax)*64+64;来设定（让它原来的宽+原来的宽*一个0到一的变量，所以他的宽就是原来的和两倍之间的值 。 给定的值-距离 然后除去给定的值）。
