详细讲解基于javascript的苹果系统底层菜单

(对不起，之前发表的分析有误。这个我现在还没问呢！)

昨天，我在“苗伟课堂”上看到了一个苹果菜单的演示。根据其中提到的勾股定理。我自己分析了代码。如下所示：

先来个效果图吧！

休息时：

当鼠标滑动时：

首先，要实现的功能或效果：

当鼠标靠近其中一张图片滑动时，图片会随着鼠标靠近而慢慢放大。

A.它是“放大”的，不是“放大”的。【放大】等于比例，而【放大】:不一定等于比例。它将反映在下面的公式中。

B.这里的【靠近】是指靠近图片的【中心点】。离画面中心点越近越大，离中心点越远越小。当然，这里的小意味着不会变得比原值小。

当鼠标靠近红点，也就是图片的【中心点】时，图片变得更大、更远、更小

靠近红点

远离红点

二、功能分析：

1.“放大”效果：

原始图片宽度乘以一个比例尺数，假设图片原始尺寸为64PX宽，64PX高；然后我把这个宽度64乘以一个比例数(这里先设为X)，那么64*X就是它的放大值；

将原始宽度加到这个放大值上，这是[放大]效果的后一个值。

即放大图片的宽度值=64 * x 64

(这里不考虑高度，因为在IMG标签中，如果只定义宽度而不定义高度，那么宽度值会改变，高度值也会一起改变。所以你只需要改变宽度值。)

2.如何判断鼠标到图片中心点的距离？

鼠标是网页中间的一个点，图片【中心点】也是一个点。鼠标与图片[中心点]的距离可以通过这两点之间连线的长度来判断。

即长度值越大，鼠标离图片[中心点]越远；

长度值越小：鼠标离图片越近[中心点]；

大距离值(白色：图片，红色：中心点，黄色：鼠标，蓝色：鼠标与中心点的距离，黑色：DIV)

小距离值(白色：图片，红色：中心点，黄色：鼠标，蓝色：鼠标与中心点的距离，黑色：DIV)

3.如何得到鼠标距离图片的【中心点】值？(即上图蓝线的长度(这是重点))

3.1其本质是获取任意两点之间的距离。

3.2获取方法：首先，构造一个直角三角形。然后通过钩筋定理计算两点之间的距离；(因为我们可以通过JS得到横向、横向、纵向的数值。斜线的值是必需的。所以你可以求助于[胡克定理])

3.3 [Hook定理]:直角三角形两个直角的平方和等于斜边的平方(X2Y2=Z2)的特征；

X:一条直角边的长度；

Y:另一条直角边的长度；

Z:斜边长度(即两点之间的距离)；

因此，要得到z的长度值，需要知道x和y是什么；

3.4构造一个直角三角形

3.5求鼠标距离图片[中心点]的值，即上图中蓝线的长度，即z的值。

3.5.1首先获取x的值：(obj:白色图片，oDiv:橙色Div，oEvent:鼠标，黑色：网页)

(灰色、蓝色、紫色和绿色)的长度值=obj.offsetleftodiv.offsetleftobj.offsetWidth/2;

(红色长度值)=oEvent.clientX

x的长度值=(oimg . offsetleftodiv . offsetleftobj . offsetidth/2)-(oevent . client x)；

3.5.2再次得到y的值：(obj:白色图片，oDiv:橙色Div，oEvent:鼠标，黑色：网页)

(灰色、蓝色、紫色和绿色)的长度值

(红色长度值)=oEvent.clientY

y=(oimg)的长度值。offsettop odiv。offset top obj . offset theight/2)-(oevent。客户关系)；

3.5.3【钩子定理】:直角三角形两个直角的平方和等于斜边的平方(X2Y2=Z2)的特征；\

(数学。功率(.2)可以平方；数学。sqrt (…)可以求平方根；)

x2=math . pow(obj . offsetleft odiv . offsetleft-oevent . clientx obj.offsetWidth/2, 2)；

y2=math . pow(obj . offsettop odiv . offsettop-oevent . clienty obj.offsetHeight/2, 2)；

z2=math . pow(obj . offsetleft odiv . offsetleft-oevent . clientx obj.offsetWidth/2, 2)

math . pow(obj . offset top Odiv . offset top-oevent . clienty obj.offsetHeight/2, 2)

z=Math.sqrt(

math . pow(obj . offsetleft Odiv . offsetleft-oevent . clientx obj.offsetWidth/2, 2)

math . pow(obj . offset top Odiv . offset top-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]。宽度=((IMAx-Z)/IMAx)* 64 64；

6.完全码

document . onmousemove=function(ev){ var oEvent=ev | | event；var oDiv=document . getelementbyid(' div 1 ')；var aImg=odiv . getelementsbytagname(' img ')；var d=0；var iMax=200var I=0；函数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；iaImg.lengthI){ d=GetDistance(AimG[I])；d=Math.min(d，IMAx)；aImg[i]。宽度=((IMAx-d)/IMAx)* 64 64；}};

divid=' div 1 ' A href=' http://www.miaov.com/'img src=' http : images/img src=' http : images/3 . png ' width=' 64 ' long desc='苗伟类' alt='苗伟类' title='苗伟类'/aa href=' http://www.miaov.com/'img src=' http : images/4 . png ' width=' 64 ' long desc='苗伟类' alt='苗伟类' title='苗伟类'/a href=' http://www.mianv.com/'img src=' http 3360 images/5 . png ' width=' 64 ' } }bottom:0px位置：相对；宽度width:500pxmargin:0 autoborder:1px纯红；} # div1 img { border:none}

三.摘要

1.要得到任意两点之间的距离值，直角三角形两直角边的平方和等于斜边的平方(x2 y2=z2)；

2.(iMax-Z)/iMax，一种与比例相关的算法，结合加减乘除；

减法：一个数为常数，另一个数较大，结果较小；相反，越大；

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

3.当出现画面变化效果或形状变化效果时，是否应该先将其抽象成基本形状，如点、线、面：三角形、方形矩形、圆形、平面四边形？然后找到规律，观察那些变化，那些没有变化的，熟悉或者找到相关例子中涉及的定理和公式。慢慢演绎效果。

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