使用 CSS3 平移而不是偏移位置 top/left

Question

是否可以使用具有 jQuery 偏移量而不是 top/left 位置的 CSS3 平移变换？我目前有下面的设置，但感觉有点问题和缓慢。有什么想法吗？

$('.artists-list-container ul li a').on('mouseenter', function() {
    var image = $(this).parent('li').find('.image-container');
    $(this).parent('li').addClass('active');
    image.show();
    $(document).mousemove(function(e) {
        image.offset({
            left: e.pageX,
            top: e.pageY
        });
    });
});

我认为这可能有效，但它不跟随鼠标。

$(document).mousemove(function(e) {
    image.css({transform: 'translateX(' + e.pageX + 'px) translateY(' + e.pageY + 'px)'})
});

Answer 1

如评论中所述，当前代码通过绝对编号翻译元素。的像素，如果元素已经位于文档的 (0,0) 的偏移处（比如由于它之前的额外元素或 margin/padding 等），那么将有那么多 space 之间鼠标指针和图像的实际位置。

为避免这种情况，我们必须首先获取元素的原始位置，然后计算相对于该位置的平移值。下面是一个示例片段。

$(document).ready(function() {
  var image = $('li').find('.image-container');
  var position = image.offset();
  $(document).mousemove(function(e) {
    image.css({
      transform: 'translateX(' + (e.pageX - position.left) + 'px) translateY(' + (e.pageY - position.top) + 'px)'
    })
  });
})

ul {
  list-style-type: none;
}
img {
  vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <img class='image-container' src='http://lorempixel.com/200/200/nature/1' />
  </li>
</ul>

img 标签上的 vertical-align:top; 在上面的代码中起着关键作用，因为默认值为 baseline 并且由于 img 是替换元素 offset().top 值似乎是文档中基线的位置 (0,0) 以像素为单位。这就是导致我在问题评论中提供的代码出现轻微偏移的原因。可以在下面的代码片段中看到问题。

$(document).ready(function() {
  var image = $('li').find('.image-container');
  var position = image.offset();
  $(document).mousemove(function(e) {
    image.css({
      transform: 'translateX(' + (e.pageX - position.left) + 'px) translateY(' + (e.pageY - position.top) + 'px)'
    })
  });
})

ul {
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <img class='image-container' src='http://lorempixel.com/200/200/nature/1' />
  </li>
</ul>

注：以上问题不知为何只出现在Chrome.

下面的代码片段演示了即使在其上方的 DOM 中存在额外元素时如何正常工作的演示。

$(window).load(function() {
  var image = $('li').find('.image-container');
  var position = image.offset();
  $(document).mousemove(function(e) {
    image.css({
      transform: 'translateX(' + (e.pageX - position.left) + 'px) translateY(' + (e.pageY - position.top) + 'px)'
    })
  });
})

ul {
  list-style-type: none;
}
img {
  vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Some content before the image</div>
<p>Some other content before the image</p>
<ul>
  <li>
    <img class='image-container' src='http://lorempixel.com/200/200/nature/1' />
  </li>
</ul>

另外需要注意的是，如果在DOM中当前元素之前有多个图像，那么最好在这些图像完全加载后计算偏移量。否则，偏移量仅基于元素的行高而不是图像的实际高度。您可以在下面的代码片段中看到问题。

$(document).ready(function() {
  var image = $('li').find('.image-container');
  var position = image.offset();
  $(document).mousemove(function(e) {
    image.css({
      transform: 'translateX(' + (e.pageX - position.left) + 'px) translateY(' + (e.pageY - position.top) + 'px)'
    })
  });
})

ul {
  list-style-type: none;
}
img {
  vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Some content before the image</div>
<p>Some other content before the image</p>
<img src='http://lorempixel.com/100/100/nature/1' />
<ul>
  <li>
    <img class='image-container' src='http://lorempixel.com/200/200/nature/1' />
  </li>
</ul>

以下是在 $(window).load().

上计算偏移量的固定版本

$(window).load(function() {
  var image = $('li').find('.image-container');
  var position = image.position();
  $(document).mousemove(function(e) {
    image.css({
      transform: 'translateX(' + (e.pageX - position.left) + 'px) translateY(' + (e.pageY - position.top) + 'px)'
    })
  });
})

ul {
  list-style-type: none;
}
img {
  vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Some content before the image</div>
<p>Some other content before the image</p>
<img src='http://lorempixel.com/100/100/nature/1' />
<ul>
  <li>
    <img class='image-container' src='http://lorempixel.com/200/200/nature/1' />
  </li>
</ul>

注意：所有代码段均在 Chrome v50 dev-m、Opera v35、Firefox 44.0.2、IE11、Edge

中验证

使用 CSS3 平移而不是偏移位置 top/left

Use CSS3 translate instead of offset position top/left

javascript

css

jquery

css-transforms