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

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是替换元素， 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中经过验证