苹果底部菜单效果实现

关于苹果底部效果,一般人肯定不会陌生,由于该效果不止在苹果电脑上出现,在很多网站都运用到了该效果.效果看起来还是比较酷炫的,当鼠标移动过去时,会发现对应的菜单会出现放大的效果.图片展示:

苹果底部菜单效果实现_第1张图片


说下原理:

1.确认事件源:对应的菜单按钮,为img实现

2.确认事件属性:onmousemove,这里会出现误区,因为很多人认为是当鼠标悬浮在对应菜单项上时,该菜单才会发生变化,其实不然,仔细观察可以发现,当我们的鼠标还没有移动上去时或者说当鼠标距离某些菜单项足够近的时候,对应的菜单项会逐步出现放大效果.因为我们选定事件属性为鼠标移动事件

3.确认事件变化属性:这个很简单,就是对应的菜单项放大.但是这里有个坑需要跳过去,当鼠标距离多个菜单项都比较近时,那么这几个菜单项都会出现放大效果,而且放大的倍数都不相同,要想实现这个效果,其实得运用到勾股定理.就是曾经的直角三角形a*a+b*b=c*c,我们可以设想a值为鼠标位置,b值为菜单项中心位置,那么我们需要求出鼠标距离菜单项中心的直线距离c,c值越小,说明鼠标位置距离b越近.然后我们可以通过c值计算一个比例与菜单的宽度相乘,最终就实现了苹果底部菜单效果

代码如下:




    
    苹果底部实现
    


    

你可能感兴趣的:(html,css,javascript,html,css,javascript,前端,web)