苹果底部菜单效果实现

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

说下原理:

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

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

3.确认事件变化属性:这个很简单,就是对应的菜单项放大.但是这里有个坑需要跳过去,当鼠标距离多个菜单项都比较近时,那么这几个菜单