js模仿京东无延迟菜单效果

开发基本菜单结构,
普通二级菜单效果,
加入延迟解决移动问题,
解决延迟引入的新问题

js模仿京东无延迟菜单效果_第1张图片
效果图.png






function.js封装的函数:

    function sameSign(a,b){
      return (a ^ b) >= 0
  }
    // 向量的定义
    function vector(a,b){
      return {
        x:b.x-a.x,
        y:b.y-a.y
    }
  }
  // 向量的叉乘公式
  function vectorProduct(v1,v2){
      return v1.x * v2.y - v2.x * v1.y
  }

  // 判断点在三角形内
  function isPointInTrangle(p,a,b,c){
    var pa = vector(p,a)
    var pb = vector(p,b)
    var pc = vector(p,c)

    var t1 = vectorProduct(pa,pb)
    var t2 = vectorProduct(pa,pc)
    var t3 = vectorProduct(pb,pc)

    return sameSign(t1,t2) && sameSign(t2,t3)
    }
  function needDelay(elem,leftCorner,currMousePos){
    var offset = elem.offset()
    var topLeft = {
      x:offset.left,
      y:offset.top
     }
    var bottomLeft = {
      x:offset.left,
      y:offset.top+elem.height()
    }

    return isPointInTrangle(currMousePos,leftCorner,topLeft,bottomLeft)

}

你可能感兴趣的:(js模仿京东无延迟菜单效果)