详解基于JavaScript实现的苹果系统底部菜单

基于JavaScript的苹果风格底部菜单实现

（注：此前发布的版本存在分析错误，当前版本已修正无误。）

昨日参考了“妙味课堂”提供的苹果菜单Demo，并依据其中提到的“勾股定理”思路，对代码进行了独立分析与重构，具体实现如下：

首先展示最终实现的视觉效果：

静止状态下的菜单布局：

鼠标悬停交互时的动态效果：

功能需求与效果目标

一、功能需求与效果目标：

当鼠标滑动并靠近某一张图片时，该图片需随着鼠标距离的缩短而逐渐放大。

a. 此处强调的是“放大”而非简单的“变大”。【放大】意味着保持宽高比进行等比例缩放，而【变大】可能涉及非等比例的拉伸。后续公式将体现这一区别。

b. 这里的【靠近】特指鼠标向图片【中心点】移动的过程。距离图片【中心点】越近，图片显示越大；反之，远离中心点则图片变小。需要注意的是，【变小】是相对于放大后的状态而言，图片尺寸不会缩小至原始值以下。

鼠标靠近红点（即图片【中心点】）时，图片变大；远离时，图片变小。

靠近红点时的状态示意

远离红点时的状态示意

功能逻辑与算法分析

二、功能逻辑分析：

1. 【放大】效果的实现原理：

图片的最终宽度由原始宽度乘以一个比例系数得出。假设图片原始尺寸为宽64PX、高64PX，若设定比例系数为X，则放大后的宽度基数为 64*X。

将上述放大值与原始宽度相加，即可得到【放大】效果后的最终宽度。

即：放大后图片的宽度值 = 64*X + 64；

（注：此处无需单独处理高度。在IMG标签中，若仅定义宽度而不定义高度，浏览器会自动根据宽高比调整高度。因此，只需动态改变宽度值即可实现整体缩放。）

2. 如何判断鼠标距离图片【中心点】的远近？

鼠标在Web页面中可视为一个坐标点，图片【中心点】也是一个坐标点。通过计算这两点之间连线的长度，即可量化鼠标与图片中心点的距离。

即：该长度值越大，说明鼠标距离图片【中心点】越远；

该长度值越小，说明鼠标距离图片【中心点】越近；

距离值较大时的示意图（白色：图片，红色：中心点，黄色：鼠标，蓝色：鼠标与中心点的距离，黑色:DIV）

距离值较小时的示意图（白色：图片，红色：中心点，黄色：鼠标，蓝色：鼠标与中心点的距离，黑色:DIV）

3. 如何获取鼠标距离图片【中心点】的具体数值？（即上图中蓝色线条的长度，这是实现效果的关键）

3.1 其本质是计算任意两点之间的欧几里得距离。

3.2 计算方法：构建一个直角三角形，利用【勾股定理】计算斜边长度（即两点间距离）。由于JavaScript可以获取水平和垂直方向的坐标差，正好对应直角三角形的两条直角边，因此可借助【勾股定理】求解斜边。

3.3【勾股定理】核心公式：直角三角形两直角边的平方和等于斜边的平方（X²+Y²=Z²）；

x：一条直角边的长度；

y：另一条直角边的长度；

z：斜边长度（即两点间的距离值）；

因此，要获得Z的长度值，必须先确定X和Y的具体数值；

3.4 构建直角三角形模型

3.5 求解鼠标距离图片【中心点】的值，即上图中的蓝色线段长度，也就是 Z 的值

3.5.1 首先获取X的值：（obj:白色图片, oDiv:橙色DIV, oEvent:鼠标事件对象, 黑色背景:Web页面）

(灰色+蓝紫色+绿色区域的总长度) = obj.offsetLeft + oDiv.offsetLeft + obj.offsetWidth/2;

(红色区域的长度值) = oEvent.clientX;

X的长度值 = （ oimg.offsetLeft+oDiv.offsetLeft+obj.offsetWidth/2 ）- （oEvent.clientX）；

3.5.2 接着获取Y的值：（obj:白色图片, oDiv:橙色DIV, oEvent:鼠标事件对象, 黑色背景:Web页面）

(灰色+蓝紫色+绿色区域的总长度) = obj.offsetTop + oDiv.offsetTop + obj.offsetHeight/2;

(红色区域的长度值) = oEvent.clientY;

Y的长度值 = （ oimg.offsetTop+oDiv.offsetTop+obj.offsetHeight/2 ）- （oEvent.clientY）；

3.5.3【勾股定理】应用：直角三角形两直角边的平方和等于斜边的平方（X²+Y²=Z²）；\

（注：Math.pow(……，2)用于计算平方；Math.sqrt(……)用于计算平方根。）

x² = Math.pow(obj.offsetLeft+oDiv.offsetLeft-oEvent.clientX+obj.offsetWidth/2, 2) ;

y²= Math.pow(obj.offsetTop+oDiv.offsetTop-oEvent.clientY+obj.offsetHeight/2, 2);

z² = Math.pow(obj.offsetLeft+oDiv.offsetLeft-oEvent.clientX+obj.offsetWidth/2, 2) +

Math.pow(obj.offsetTop+oDiv.offsetTop-oEvent.clientY+obj.offsetHeight/2, 2)

z = Math.sqrt(

Math.pow(obj.offsetLeft+oDiv.offsetLeft-oEvent.clientX+obj.offsetWidth/2, 2) +

Math.pow(obj.offsetTop+oDiv.offsetTop-oEvent.clientY+obj.offsetHeight/2, 2) )

至此，成功获取到 Z 的值（即鼠标距离图片【中心点】的距离，对应上图中蓝色线条的长度）！！！

4. 图片放大的范围限制

4.1 上述计算得到的 Z 值范围应为：

最小值为0（当鼠标与【中心点】重合时，黄色点与红色点重叠，无连线，距离为0）；

最大值理论上不确定，此处人为设定上限为200；

因此，Z的有效范围被限定在 0 到 200 之间；

Math.min()：返回两个数中较小的一个；

z = Math.min(Z,200)；

5. 图片放大缩放的最终公式：

当z越接近0，即鼠标越靠近图片【中心点】时，图片应放大；

当z越接近200，即鼠标越远离图片【中心点】时，图片应缩小；

结合第一部分的公式：图片的宽度值 = X * 64 + 64；

推导出比例系数 X = (iMax-Z)/iMax

aImg[i].width=((iMax-Z)/iMax)*64+64;

6. 完整实现代码

document.onmousemove=function (ev)
{
 var oEvent=ev||event;
 var oDiv=document.getElementById('div1');
 var aImg=oDiv.getElementsByTagName('img');
 var d=0;
 var iMax=200;
 var i=0;
 function getDistance(obj)
 {
  return Math.sqrt
  (
   Math.pow(obj.offsetLeft+oDiv.offsetLeft-oEvent.clientX+obj.offsetWidth/2, 2)+
   Math.pow(obj.offsetTop+oDiv.offsetTop-oEvent.clientY+obj.offsetHeight/2, 2)
  ); 
 }
 for(i=0;i<aImg.length;i++)
 {
  d=getDistance(aImg[i]);
  d=Math.min(d,iMax);  
  aImg[i].width=((iMax-d)/iMax)*64+64;
 }
};

<divid="div1">
 <ahref="http://www.miaov.com/"><imgsrc="images/1.png" width="64" longdesc="妙味课堂" alt="妙味课堂" title="妙味课堂" /></a>
 <ahref="http://www.miaov.com/"><imgsrc="images/2.png" width="64" longdesc="妙味课堂" alt="妙味课堂" title="妙味课堂" /></a>
 <ahref="http://www.miaov.com/"><imgsrc="images/3.png" width="64" longdesc="妙味课堂" alt="妙味课堂" title="妙味课堂" /></a>
 <ahref="http://www.miaov.com/"><imgsrc="images/4.png" width="64" longdesc="妙味课堂" alt="妙味课堂" title="妙味课堂" /></a>
 <ahref="http://www.miaov.com/"><imgsrc="images/5.png" width="64" longdesc="妙味课堂" alt="妙味课堂" title="妙味课堂" /></a>
</div>
body {margin:0px;}
#div1 {text-align:center;bottom:0px; position:relative; width:500px; margin:0 auto; border:1px solid red;}
#div1 img {border:none;}

核心算法与代码总结

三、总结

1. 要计算任意两点间的距离，需利用【勾股定理】，即直角三角形两直角边的平方和等于斜边的平方（X²+Y²=Z²）；

2. 核心算法 (iMax-Z)/iMax 涉及比例计算，结合加减乘除运算；

减法逻辑：一个数不变，另一个数变大，结果越小；反之越大；

加法逻辑：一个数不变，另一个数变大，结果越大；反之越小；

3. 当涉及图片变化或形状变换效果时，建议先将其抽象为基本几何元素（如点、线、面：三角形、正方形、矩形、圆、平行四边形），寻找变化规律，观察哪些要素在变、哪些不变，并熟悉相关实例所涉及的定理公式，逐步推导出最终效果。

以上就是本文的全部内容，希望对大家有所帮助，谢谢对本站的支持！