Question

我设置了方向感知悬停效果。它工作正常，直到我把它放在一个溢出滚动的容器中。当它第一次加载并且你根本没有滚动时它工作正常，但是一旦你开始滚动父容器，翻转总是像你从顶部滚入而我无法找出原因。

我设置了这个问题，这非常令人困惑，我很乐意得到任何帮助：

这是方向感知的特定js：

$(".container").bind("mouseenter mouseleave",function(e){

/** the width and height of the current div **/
var w = $(this).width();
var h = $(this).height();

/** calculate the x and y to get an angle to the center of the div from that x and y. **/
/** gets the x value relative to the center of the DIV and "normalize" it **/
var x = (e.pageX - this.offsetLeft - (w/2)) * ( w > h ? (h/w) : 1 );
var y = (e.pageY - this.offsetTop  - (h/2)) * ( h > w ? (w/h) : 1 );

/** the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);**/
/** first calculate the angle of the point, 
 add 180 deg to get rid of the negative values
 divide by 90 to get the quadrant
 add 3 and do a modulo by 4  to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3 )  % 4;


/** do your animations here **/ 
switch(direction) {
 case 0:
  /** animations from the TOP **/
        currentSides = "thumb_cube show-top";
 break;
 case 1:
  /** animations from the RIGHT **/
        currentSides = "thumb_cube show-right";
 break;
 case 2:
  /** animations from the BOTTOM **/
        currentSides = "thumb_cube show-bottom";
 break;
 case 3:
  /** animations from the LEFT **/
        currentSides = "thumb_cube show-left";
 break;
}});

Answer 1

这里的问题出在方向感知脚本中。

var x = (e.pageX - this.offsetLeft - (w/2)) * ( w > h ? (h/w) : 1 );
var y = (e.pageY - this.offsetTop  - (h/2)) * ( h > w ? (w/h) : 1 );

由于使用了html偏移量，测量值是错误的，它的文档偏移量不是浏览器窗口所需要的。

这里的解决方案是使用jquery偏移量，因此代码更改为：

var x = (e.pageX - $(this).offset().left - (w/2)) * ( w > h ? (h/w) : 1 );
var y = (e.pageY - $(this).offset().top  - (h/2)) * ( h > w ? (w/h) : 1 );

这将从浏览器窗口进行偏移测量。

溢出滚动中的方向感知悬停中断

1 个答案: