码迷,mamicode.com
首页 > 移动开发 > 详细

Javascript 仿苹果导航菜单

时间:2018-09-22 12:34:45      阅读:262      评论:0      收藏:0      [点我收藏+]

标签:html   The   效果   event   一个   function   charset   nload   font   

  使用 Javascript 制作的仿苹果导航菜单,当鼠标移过时,使用勾股定理计算当前鼠标所在位置和图片中心点的距离,并且用一个 scale变量 来存储触发缩放的位置,距离越近,scale值越接近1,图片也就越大,这里需要注意的是当 scale的值小于0.5时,应该让它一直等于0.5,不然图片会随着鼠标距离图片中心的距离越远,图片越小甚至消失。

效果如下:

技术分享图片

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>苹果导航菜单</title>
 6     <style type="text/css">
 7         body{
 8             margin: 0;
 9         }
10         #div1{
11             width: 100%;
12             position: absolute;
13             bottom: 0;
14             text-align: center;
15         }
16         #div1 img {
17             cursor: pointer;
18         }
19     </style>
20     <script type="text/javascript">
21         window.onload=function(){
22             document.onmousemove=function(ev){
23                 var oEvent=ev||event;
24                 var oDiv=document.getElementById(div1);
25                 var aImg=document.getElementsByTagName(img);
26                 for(var i=0;i<aImg.length;i++){
27                     // 先使用勾股定理求出鼠标和图片中心点的距离
28                     // 图片中心为图片左/上边距加自身宽/高一半
29                     var x=aImg[i].offsetLeft+aImg[i].offsetWidth/2;//offsetLeft是相对父级的,此时父级是div
30                     var y=aImg[i].offsetTop+oDiv.offsetTop+aImg[i].offsetHeight/2;
31                     var a=x-oEvent.clientX;
32                     var b=y-oEvent.clientY;
33                     var dis=Math.sqrt(a*a+b*b);
34                     //dis/300的300 是 当前鼠标位置与图片中心点距离的总和 的二倍,如果想要在离图片更远/近的地方缩放图片,就改变这个数值大小
35                     var scale = 1-dis/300;
36                     if(scale<0.5){
37                         scale=0.5;
38                     }
39                     aImg[i].width=scale*128;//128px是图片原本最大的宽
40                 }
41             }
42         }
43     </script>
44 </head>
45 <body>
46     <div id="div1">
47         <img src="images/1.png" width="64">
48         <img src="images/2.png" width="64">
49         <img src="images/3.png" width="64">
50         <img src="images/4.png" width="64">
51         <img src="images/5.png" width="64">
52     </div>
53 </body>
54 </html>

 

Javascript 仿苹果导航菜单

标签:html   The   效果   event   一个   function   charset   nload   font   

原文地址:https://www.cnblogs.com/blue-guapi/p/9689468.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!