zoukankan      html  css  js  c++  java
  • 仿苹果菜单的效果

    一般苹果菜单效果如下图所示,现在鼠标放在第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。

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

  • 相关阅读:
    流式布局思想
    盒子的显隐
    高级布局 浮动 清浮动
    display总结 overflow知识
    边界圆角 盒模型布局 图片背景 精灵图
    io模型
    协程
    GIL 进程池与线程池
    守护进程 互斥锁 进程间通讯
    子进程
  • 原文地址:https://www.cnblogs.com/qqing/p/6647024.html
Copyright © 2011-2022 走看看