苹果dock效果

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             #div1{

                 width: 100%;

                 position: fixed;

                 text-align: center;

                 bottom: 0;

                 left: 0;

             }

             #div1 img{

                 width: 64px;

             }

         </style>

         <script type="text/javascript">

              window.onload=function()

              {

                  var oDiv1 = document.getElementById("div1");

                  var aImgs = oDiv1.getElementsByTagName("img");

                  var ainput = document.getElementsByTagName("input");

                  console.log(aImgs[0].getBoundingClientRect());

              document.onmousemove = function(ev) {

                     //计算鼠标到每个图片之间的直线距离

                     var e = ev || event;

                     for (var i=0; i<aImgs.length; i++) {

                         //计算直线距离

                         //因为鼠标是到可视区的距离，所以，我们应该获取鼠标到可视区的距离-元素到可视区的距离

                         var a = Math.abs(e.clientY - aImgs[i].getBoundingClientRect().y - aImgs[i].offsetHeight / 2);

                         var b = Math.abs(e.clientX - aImgs[i].getBoundingClientRect().x - aImgs[i].offsetWidth / 2);

                         var c = Math.sqrt(a*a + b*b);

                         if (c > 300) {

                             c = 300;

                         }

                         aImgs[i].style.width = 128 - ( c * 0.2 ) + 'px';

                     }

                 }

              }

         </script>

     </head>

     <body>

         <input type="text" />

         <input type="text" />

         <input type="text" />

         <input type="text" />

         <input type="text" />

         <div id="div1">

             <img src="img/1.png" alt="" />

             <img src="img/2.png" alt="" />

             <img src="img/3.png" alt="" />

             <img src="img/4.png" alt="" />

             <img src="img/5.png" alt="" />

         </div>

     </body>

 </html>
苹果dock效果
问题：
只能在火狐下运行谷歌下不行？
有待解决？？？
相关文章
