Question

是否可以使用CSS3翻译变换与jQuery偏移而不是顶部/左侧位置？我目前有下面的设置，但它感觉有点马车和慢。有什么想法吗？

$('.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）偏移处（比如由于它之前的额外元素或边距/填充等），那么鼠标指针和实际位置之间会有很大的空间图像。

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

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

vertical-align:top;标记上的img在上述代码中起着关键作用，因为默认值为baseline，而且img是替换元素{{1} } value似乎是文档（0,0）中基线的位置（以像素为单位）。这就是我在问题评论中提供的代码略微偏移的原因。这个问题可以在下面的代码片段中看到。

offset().top

$(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;
}

注意： 由于某些原因上述问题仅在Chrome中出现。

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

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

$(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;
}

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

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

$(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;
}

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

中得到验证

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

1 个答案: