Jquery 方向转换鼠标事件区域似乎在Chrome中偏移？

我刚刚完成了Jquery定向库的构建，并在chrome和 方向转换似乎偏离了鼠标位置。这是我目前拥有的代码

我想它计算鼠标方向的方式可能有问题

它在Firefox和IE10中工作得非常好

我尝试过将容器库容器从绝对更改为相对和静态，但没有成功

我很确定这和VarX和VarY有关，但我不是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);

JQuery

    $(".gallery li").on("mouseenter mouseleave", function (e) {

      var w = $(this).width();
      var h = $(this).height();

      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);

      var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;

      /** check for direction **/
      switch (direction) {
          case 0:
              // direction top
              var slideFrom = {
                  "top": "-100%",
                      "right": "0"
              };
              var slideTo = {
                  "top": 0
              };
              var imgSlide = "0, 100";

              break;
          case 1:
              // direction right
              var slideFrom = {
                  "top": "0",
                      "right": "-100%"
              };
              var slideTo = {
                  "right": 0
              };
              var imgSlide = "-100, 0";

              break;
          case 2:
              // direction bottom
              var slideFrom = {
                  "top": "100%",
                      "right": "0"
              };
              var slideTo = {
                  "top": 0
              };
              var imgSlide = "0, -100";

              break;
          case 3:
              // direction left
              var slideFrom = {
                  "top": "0",
                      "right": "100%"
              };
              var slideTo = {
                  "right": 0
              };
              var imgSlide = "100, 0";

              break;
      }

      if (e.type === 'mouseenter') {
          var element = $(this);

          element.find(".info").removeClass("transform").css(slideFrom);
          element.find("img").addClass("transform-img").css("transform", "matrix(1, 0, 0, 1," + imgSlide + ")");

          setTimeout(function () {
              element.find(".info").addClass("transform").css(slideTo);
          }, 10);


      } else {
          var element = $(this);

          element.find(".info").addClass("transform").css(slideFrom);
          element.find("img").removeClass("transform-img").css("transform", "matrix(1, 0, 0, 1," + imgSlide + ")");

          setTimeout(function () {
              element.find("img").addClass("transform-img").css("transform", "matrix(1, 0, 0, 1,0,0)");
          }, 10);

      }
  });

HTML

---

我原以为IE在chromeAs强大之前会有问题，因为chrome在你开始处理事情时会有很多问题。现在，只有少数情况下确实存在问题。有时候事情就是不起作用。我不知道，我在chrome上运行它，它工作得非常好。o@Nicholas杨：它没有走错方向吗？它看起来工作正常，而且我也在跑步

<div id="gallery-container">
<div class="gallery">
    <ul>
        <li> <a href="#" title="">
               <img src="http://th08.deviantart.net/fs71/200H/i/2012/190/b/7/bastique_graffiti_art_car__02__golf_mkv_r32_by_bastiqueart-d56k7iu.jpg" width="300" height="169" />
               <div class="info"><h3 class="heading">Lorem ipsum</h3>
        <p>dolor sit amet, consectetur adipiscing elit. Nam vel ultricies sem. Praesent posuere, augue quis aliquet vestibulum, metus tellus vehicula sem, tincidunt luctus nisl sem et orci.</p></div>
            </a>

        </li>
    </ul>
</div>
<div class="gallery">
    <ul>
        <li> <a href="#" title="">
               <img src="http://th08.deviantart.net/fs71/200H/i/2012/190/b/7/bastique_graffiti_art_car__02__golf_mkv_r32_by_bastiqueart-d56k7iu.jpg" width="300" height="169" />
               <div class="info"><h3 class="heading">Lorem ipsum</h3>
        <p>dolor sit amet, consectetur adipiscing elit. Nam vel ultricies sem. Praesent posuere, augue quis aliquet vestibulum, metus tellus vehicula sem, tincidunt luctus nisl sem et orci.</p></div>
            </a>

        </li>
    </ul>
</div>
<div class="gallery">
    <ul>
        <li> <a href="#" title="">
               <img src="http://th08.deviantart.net/fs71/200H/i/2012/190/b/7/bastique_graffiti_art_car__02__golf_mkv_r32_by_bastiqueart-d56k7iu.jpg" width="300" height="169" />
               <div class="info"><h3 class="heading">Lorem ipsum</h3>
        <p>dolor sit amet, consectetur adipiscing elit. Nam vel ultricies sem. Praesent posuere, augue quis aliquet vestibulum, metus tellus vehicula sem, tincidunt luctus nisl sem et orci.</p></div>
            </a>

        </li>
    </ul>
</div>
<div class="gallery">
    <ul>
        <li> <a href="#" title="">
               <img src="http://th08.deviantart.net/fs71/200H/i/2012/190/b/7/bastique_graffiti_art_car__02__golf_mkv_r32_by_bastiqueart-d56k7iu.jpg" width="300" height="169" />
               <div class="info"><h3 class="heading">Lorem ipsum</h3>
        <p>dolor sit amet, consectetur adipiscing elit. Nam vel ultricies sem. Praesent posuere, augue quis aliquet vestibulum, metus tellus vehicula sem, tincidunt luctus nisl sem et orci.</p></div>
            </a>

        </li>
    </ul>
</div></div>