Pen*_*rce 1 html javascript css jquery
我试图获得 99designs 将鼠标悬停在设计上时获得的图像效果.. [99designs.ca] 标志设计大赛：Runningbug Needs Logo 220626
我目前正在获取鼠标在 mousemove 上的位置，然后使用它来移动我的 popover <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;
});
})
我不确定我可以用另一种方式来做到这一点..有什么想法吗？
整个事件过程如下：
<img>标签还调用了一个 js 函数，该函数将 img 标签的位置更改为鼠标的位置。实际上，你可以在这里查看：pokemonsite
更新：我看到有赏金放置（谢谢！）。我现在有点忙，无法检查所有其他答案，但我会确保尽快检查它们
在使用 mousemove 事件时，有几种方法可以提高性能。
backface-visibility: hidden在 popover 元素上使用以强制硬件加速。同样的事情可以实现，transform: translate3d(0,0,0)但这使得使用 CSStransform函数变得困难（参见第 2 点）。
使用 CSStransform函数进行绝对定位以避免重绘，但保持 popover 元素绝对或固定定位。
通过 JS 设置内联 CSS 时，请使用 requestAnimationFrame 以避免不必要的布局垃圾。
（也许，可选）悬停时隐藏光标并使用弹出元素作为位置指示器。
将所有可以从 JS 移动到 CSS ie。:hoverstate 可用于切换 popover 元素的显示。
我制作了结合列出的所有内容的演示示例。光标位置和弹出图像之间仍然存在一些延迟，并且原始问题中没有示例链接工作，因此我无法与之进行比较，但我希望有人觉得这很有用。
<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)' });
}
参考：