使用 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>
原文地址：https://www.cnblogs.com/blue-guapi/p/9689468.html
时间： 2024-11-05 13:34:18