Question

我发现这个伟大的方向感知悬停效果，我想在我的网站上实施。我发现它的问题是，当从元素顶部悬停时，正确的1/4框将注册为从右侧而不是元素顶部进/出。

这是检查工作代码的CodePen。

我无法弄清楚错误的来源。我已经看过填充，边距，透视，宽度和＆amp;高度。我似乎无法找到错误的来源。

我认为问题出在脚本代码中，如下所示：

var nodes  = document.querySelectorAll('li'),
    _nodes = [].slice.call(nodes, 0);

var getDirection = function (ev, obj) {
    var w = obj.offsetWidth,
        h = obj.offsetHeight,
        x = (ev.pageX - obj.offsetLeft - (w / 2) * (w > h ? (h / w) : 1)),
        y = (ev.pageY - obj.offsetTop - (h / 2) * (h > w ? (w / h) : 1)),
        d = Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4;

    return d;
};

var addClass = function ( ev, obj, state ) {
    var direction = getDirection( ev, obj ),
        class_suffix = "";

    obj.className = "";

    switch ( direction ) {
        case 0 : class_suffix = '-top';    break;
        case 1 : class_suffix = '-right';  break;
        case 2 : class_suffix = '-bottom'; break;
        case 3 : class_suffix = '-left';   break;
    }

    obj.classList.add( state + class_suffix );
};

// bind events
_nodes.forEach(function (el) {
    el.addEventListener('mouseover', function (ev) {
        addClass( ev, this, 'in' );
    }, false);

    el.addEventListener('mouseout', function (ev) {
        addClass( ev, this, 'out' );
    }, false);
});

这是转换/动画CSS：

li .info { width: 100%; height: 100%; padding: 20px; position: absolute; top: 0; left: 0; border-radius: 4px; pointer-events: none; background-color: rgba(26, 188, 156, 0.9); transform: rotate3d(1, 0, 0, 90deg);}

.in-top .info { transform-origin: 50% 0%; animation: in-top 300ms ease 0ms 1 forwards;}
.in-right .info { transform-origin: 100% 50%; animation: in-right 300ms ease 0ms 1 forwards;}
.in-bottom .info { transform-origin: 50% 100%; animation: in-bottom 300ms ease 0ms 1 forwards;}
.in-left .info { transform-origin: 0% 0%; animation: in-left 300ms ease 0ms 1 forwards;}
.out-top .info { transform-origin: 50% 0%; animation: out-top 300ms ease 0ms 1 forwards;}
.out-right .info { transform-origin: 100% 50%; animation: out-right 300ms ease 0ms 1 forwards;}
.out-bottom .info { transform-origin: 50% 100%; animation: out-bottom 300ms ease 0ms 1 forwards;}
.out-left .info { transform-origin: 0% 0%; animation: out-left 300ms ease 0ms 1 forwards;}


@keyframes in-top {
  from {
    transform: rotate3d(-1, 0, 0, 90deg);
  }

  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-right {
  from {
    transform: rotate3d(0, -1, 0, 90deg);
  }

  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-bottom {
  from {
    transform: rotate3d(1, 0, 0, 90deg);
  }

  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-left {
  from {
    transform: rotate3d(0, 1, 0, 90deg);
  }

  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes out-top {
  from {
   transform: rotate3d(0, 0, 0, 0deg);
  }

  to {
    transform: rotate3d(-1, 0, 0, 102deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }

  to {
    transform: rotate3d(0, -1, 0, 102deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }

  to {
    transform: rotate3d(1, 0, 0, 101deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }

  to {
    transform: rotate3d(0, 1, 0, 102deg);
  }
}

您可以在我上面链接的CodePen上找到HTML。

同样 - 我遇到的问题是，当从右上方悬停到元素中时，它不会从顶部进行注册。它注册为从右侧悬停并相应地转换叠加div。

使用jquery mouseOver的方向感知悬停效果有方向错误

0 个答案: