使用 CSS3 平移而不是顶部/左侧偏移位置

Use CSS3 translate instead of offset position top/left

本文关键字：顶部 位置 CSS3 使用      更新时间：2023-09-26

是否可以使用带有jQuery偏移量而不是顶部/左侧位置的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)'})
});

如注释中所述，当前代码将元素转换为绝对编号。 像素，如果元素已经位于文档 (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;
}
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中进行了验证

相关文章：