滑动菜单

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>appleMenu</title>
   <style type="text/css">
       body{margin:0px auto;padding:0px auto;}
       #menuBar{100%;height:70px;position:absolute;bottom:0px;text-align: center;}
       #menuBar img{70px;height:70px;margin:5px 10px;}
   </style>
   <script type="text/javascript">
       window.onload=function(){
           var oMenu=document.getElementById('menuBar');
           var aImg=oMenu.getElementsByTagName('img');
           document.onmousemove=function(ev){
               var ev=ev||event;
               for(var i=0;i<aImg.length;i++){
               var x=aImg[i].offsetLeft+aImg[i].style.width/2;
               var y=aImg[i].offsetTop+aImg[i].style.height/2+oMenu.offsetTop;
               var a=ev.clientX-x;
               var b=ev.clientY-y;
               var c=Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
               var size=1-c/300;
               if(size<0.5){
                   size=0.5;
               }
               aImg[i].style.width=size*125+'px';
               aImg[i].style.height=size*125+'px';

               }
           }
       }
   </script>
</head>
<body>
   <div id="menuBar">
       <img src="../images/1.jpg">
       <img src="../images/2.jpg">
       <img src="../images/3.jpg">
       <img src="../images/4.jpg">
       <img src="../images/5.jpg">
   </div>
</body>
</html>