Question

我刚刚完成了一个Jquery方向画廊，我去测试它在chrome和方向转换似乎偏离了鼠标位置see jsfiddle in chrome。这是我目前的代码。

我认为它计算鼠标方向的方式可能有问题吗？

（它在Firefox和IE 10中完美运行）

我尝试将容器（＃gallery-container）从绝对更改为相对和静态而没有运气。

我很确定它与var x和var y有关，但我不是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

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

定向过渡鼠标事件区域似乎在Chrome中被抵消了？

0 个答案: