1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #div1{ 8 width: 100%; 9 position: fixed; 10 text-align: center; 11 bottom: 0; 12 left: 0; 13 } 14 #div1 img{ 15 width: 64px; 16 } 17 </style> 18 <script type="text/javascript"> 19 window.onload=function() 20 { 21 var oDiv1 = document.getElementById("div1"); 22 var aImgs = oDiv1.getElementsByTagName("img"); 23 var ainput = document.getElementsByTagName("input"); 24 25 console.log(aImgs[0].getBoundingClientRect()); 26 27 document.onmousemove = function(ev) { 28 //计算鼠标到每个图片之间的直线距离 29 var e = ev || event; 30 for (var i=0; i<aImgs.length; i++) { 31 //计算直线距离 32 //因为鼠标是到可视区的距离，所以，我们应该获取鼠标到可视区的距离-元素到可视区的距离 33 var a = Math.abs(e.clientY - aImgs[i].getBoundingClientRect().y - aImgs[i].offsetHeight / 2); 34 var b = Math.abs(e.clientX - aImgs[i].getBoundingClientRect().x - aImgs[i].offsetWidth / 2); 35 var c = Math.sqrt(a*a + b*b); 36 37 if (c > 300) { 38 c = 300; 39 } 40 aImgs[i].style.width = 128 - ( c * 0.2 ) + 'px'; 41 } 42 } 43 } 44 </script> 45 </head> 46 <body> 47 <input type="text" /> 48 <input type="text" /> 49 <input type="text" /> 50 <input type="text" /> 51 <input type="text" /> 52 53 <div id="div1"> 54 <img src="img/1.png" alt="" /> 55 <img src="img/2.png" alt="" /> 56 <img src="img/3.png" alt="" /> 57 <img src="img/4.png" alt="" /> 58 <img src="img/5.png" alt="" /> 59 </div> 60 </body> 61 </html>
问题：
只能在火狐下运行 谷歌下不行？
有待解决？？？