滑动菜单

时间：2015-08-17 17:25:44 阅读：100 评论：0 收藏：0 [点我收藏+]

标签：

<!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{width:100%;height:70px;position:absolute;bottom:0px;text-align: center;}
       #menuBar img{width: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>

滑动菜单

标签：

原文地址：http://blog.csdn.net/qq_21773607/article/details/47726801

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行