大佬教程收集整理的这篇文章主要介绍了详解基于javascript实现的苹果系统底部菜单,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
(不好意,先前发布的是有误的分析。现在的这个没问提了!!!)
昨天看到了“妙味课堂”的一个苹果菜单的DEMO。根据里面提到的“勾股定理”。我自己分析了一下代码。如下:
先来一效果图吧!
静止时:
鼠标滑动时:
在鼠标滑动的靠近其中某一张图片时,这个图片会随着鼠标向它的靠近而慢慢放大。
a.是“放大”不是“变大”。【放大】是等比例的,而【变大】:不一定是等比例。后面的公式中会体现。
b.这里的【靠近】:是指靠近图片的【中心点】。离图片【中心点】越近,图片越大,远离中心点,就变小,当然这里的【变小】是指相对于放大之后的变小,不会变小到比原始值还要小。
鼠标靠近红点即图片的【中心点】,图片变大,远离,变小
靠近红点
远离红点
原来的图片宽度乘以一个比例数,假设这个图片原大小是宽64PX 高64PX;那么我把这个宽64乘以一个比例数(这里先设为X),那么 64*X 就是它放大值;
用这个放大值加上原先的宽度,就是【放大】效果的后值。
即:放大后图片的宽度值 = 64*X + 64;
(这里不考虑高度,因为在IMG标签中,不定义高度,只定义宽度的话,那么宽度值变化了,高度值也会一起变化。所以只需要改变宽度值,就行了。)
鼠标在web页面中间是一个点,而
即:这个长度值越大:说明鼠标距离图片【中心点】越远;
这个长度值越小:说明鼠标距离图片【中心点】越近;
距离值大(白色:图片,红色:中心点,黄色:鼠标,蓝色:鼠标与中心点的距离,黑色:DIV)
距离值小(白色:图片,红色:中心点,黄色:鼠标,蓝色:鼠标与中心点的距离,黑色:DIV)
3.1 其实质就是要获得任意两点之间的距离值。
3.2 获得方法:先构建一个直角三角形。再通过【勾肌定理】计算出两点之间的距离值;(因为我们可以通过JS的方法获得水平横向和纵向的值。正好要求斜线的值。于是可以求助【勾肌定理】了)
3.3【勾肌定理】:直角三角形的两直角边的平方和等于斜边的平方这一特性(X2+Y2=Z2);
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:白的图片,黑色:web页面)
(灰色+蓝紫色+绿色)的长度值 = obj.offsetTop + oDiv.offsetTop + obj.offsetHeight/2;
(红色的长度值)= oEvent.clientY;
Y的长度值 = ( oimg.offsetTop+oDiv.offsetTop+obj.offsetHeight/2 )- (oEvent.clientY);
3.5.3【勾肌定理】:直角三角形的两直角边的平方和等于斜边的平方这一特性(X2+Y2=Z2);\
(Math.pow(……,2)可以球出平方; Math.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.offsetTop+oDiv.offsetTop-oEvent.clientY+obj.offsetHeight/2,2)
z = Math.sqrt(
Math.pow(obj.offsetLeft+oDiv.offsetLeft-oEvent.clientX+obj.offsetWidth/2,2) )
终于获得到 Z 的值了(即鼠标距离图片【中心点】的值,上图中蓝色线条的长度)!!!
4.1上面的Z的范围应该是
最小0(鼠标和【中心点】重合,黄色和红色重合,之间没有连线。所以是0);
最大不确定;这里我们规定一个200;
所以z的范围 0 - 200;
Math.min():返回两个数中较小的;
z = Math.min(Z,200);
当z越接近0, 即鼠标越靠近图片【中心点】,图片应该放大;
当z越接近200, 即鼠标越远离图片【中心点】,图片应该缩小;
结合第一点的公式:图片的宽度值 = X *64+ 64;
得出公式:X = (iMax-z)/iMax
aImg[i].width=((iMax-z)/iMaX)*64+64;
以上就是本文的全部内容,希望对大家有所帮助,谢谢对菜鸟教程的支持!
以上是大佬教程为你收集整理的详解基于javascript实现的苹果系统底部菜单全部内容,希望文章能够帮你解决详解基于javascript实现的苹果系统底部菜单所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。