滑动菜单

最新推荐文章于 2025-04-25 12:19:06 发布

原创最新推荐文章于 2025-04-25 12:19:06 发布 · 739 阅读

0 ·

CC 4.0 BY-SA版权

javascript知识点专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现的互动式菜单栏设计方案。该方案中，菜单栏内的图标会根据鼠标的位置动态调整大小，为用户提供有趣且直观的交互体验。通过调整图像的尺寸来响应用户的鼠标移动，使菜单更具吸引力。

<!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>