javascript - mouseMove 非常滞后

Question

我正在尝试获得 99designs 在将鼠标悬停在设计上时获得的图像效果。。[99designs.ca] Logo design contest: Runningbug Needs Logo 220626

我目前正在获取鼠标在 mousemove 上的位置，然后使用它来移动我的弹出框 <img> ，并且一切正常，但它非常滞后..并且大概是因为进行了这么多次调用。

获取鼠标的位置:

jQuery(document).ready(function(){
   //$("#special").click(function(e){
   $(".imgWrap").mousemove(function(e){
      //$('#status2').html(e.pageX +', '+ e.pageY);
      //alert(e.pageX + ', ' + e.pageY);
      mouseX = e.pageX;
      mouseY = e.pageY;
   }); 
})

我不确定还有什么方法可以做到这一点……有什么想法吗？

事件的全过程如下:

1. 用户将鼠标悬停在 img 标签上。
2. 我按照上面的方法获取了鼠标的位置。
3. <img>标记还调用一个 js 函数，该函数将 img 标记的位置更改为鼠标的位置。

其实，你可以在这里查看:pokemonsite

更新:我看到有悬赏(谢谢!)。我现在有点忙，无法检查所有其他答案，但我会确保尽快检查它们

Answer 1

在使用 mousemove 事件时，有多种方法可以提高性能。

1. 在 popover 元素上使用 backface-visibility: hidden 来强制硬件加速。同样的事情可以通过 transform: translate3d(0,0,0) 实现，但这使得使用 CSS transform 函数变得困难(参见第 #2 点)。

2. 使用 CSS transform 函数进行绝对定位以避免重绘，但保持 popover 元素绝对定位或固定定位。

3. 当通过 JS 设置内联 CSS 时，使用 requestAnimationFrame 以避免不必要的布局垃圾。

4. (可能，可选)在悬停时隐藏光标并使用弹出元素作为位置指示器。

5. 将所有可以从 JS 转移到 CSS 的东西。 :hover 状态可用于切换弹出元素的显示。

我结合列出的所有内容制作了演示示例。光标位置和弹出图像之间仍然存在一些延迟，并且原始问题中的示例链接都不起作用，因此我无法与之进行比较，但我希望有人觉得这很有用。

DEMO

<div id="imgHolder" class="imgHolder">
    <img src="//placehold.it/200x200" alt="" />
</div>

<div id="bigImgHolder" class="imgHover">
   <img src="//placehold.it/500x500" alt="" />
</div>

.imgHover { 
    display: none;
    backface-visibility: hidden;
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
}

.imgHolder:hover ~ .imgHover { display: block; }

// uncomment if it makes sense
//.imgHolder:hover { cursor: none; }

var posX, posY;

$('#imgHolder').mousemove(HoverImg);

function HoverImg(e) {
    posX = e.pageX;
    posY = e.pageY;
    window.requestAnimationFrame(showBigImg);  
}

function showBigImg() {
    $('#bigImgHolder').css({'-webkit-transform': 'translateX(' + posX + 'px) translateY(' + posY + 'px)', 'transform': 'translateX(' + posX + 'px) translateY(' + posY + 'px)' });
}

引用资料:

• http://davidwalsh.name/translate3d
• http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
• https://css-tricks.com/using-requestanimationframe/