仿苹果菜单的效果

一般苹果菜单效果如下图所示,现在鼠标放在第3个图标的上面,这个时候第3个图标就会变大,相邻的2个图标也会不同程度的变大,今天呢就是做了这样子的一个效果

原理:

  1、当你鼠标移入5个图标的范围时,计算鼠标与5个图标的距离,根据距离计算变大的值(比例),即红线,距离鼠标越近的图标的大小乘以这个比例即可

  2、距离怎么求?我们可以把整个页面看成一个坐标轴,比如: 页面上 img1 的坐标其实就是的(img1.offsetLeft,img1.offsetTop),鼠标的坐标就是(ev.clientX,ev.clientY),要求出img1与鼠标的距离(就是上图红线部分),这个时候就要用到勾股定理。

  3、我们知道三角形的沟股定理有:a2 + b2 = c2

    而在js中,有会用到2个方法,一个是计算数值的N次平方根,一个是一个数值的开平方根,如 下

ath.pow(5,2);   //表示5的2次方     
Math.pow(5,3);   //表示5的3次方
			
Math.sqrt(9);    //9的开平方根
Math.pow(9,1/3); //9的开立方

   将数学与实例联系起来就是,上图红线部分就是我们在勾股定理中的c。

查看实例的代码及其效果,请狠狠的点击这里

原文地址:https://www.cnblogs.com/qqing/p/6647024.html