mouseMove非常滞后
mouseMove非常滞后
提问于 2013-06-01 09:19:04
我正在尝试获得99design在将鼠标悬停在设计上时所获得的图像效果。[99designs.ca]徽标设计竞赛:运行错误需要徽标220626
我现在正在获取鼠标在mousemove上的位置，然后用它来移动我的弹出窗口图片
，并且一切运行正常，但它是非常迟钝的..。可能是因为打了这么多电话。
要获取鼠标的位置，请执行以下操作：
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标签上。
- 我按照上面的方法得到了鼠标的位置。
- The
图片标签还调用js函数，该函数将img标签的位置更改为鼠标的位置。
实际上，你可以在这里查看：pokemonsite
更新:我看到有一笔赏金(谢谢!)我现在有点忙，不能检查所有其他答案，但我会尽快检查的
回答 7
Stack Overflow用户
发布于 2015-03-26 02:12:50
在使用mousemove事件时，有几种方法可以提高性能。
- 使用
backface-visibility: hidden在popover元素上强制硬件加速。同样的事情也可以用来实现transform: translate3d(0,0,0)但是这使得使用CSS变得很困难。transform函数(参见第2点)。 - 使用CSS
transform函数用于绝对定位，以避免重绘，但保持弹出元素的绝对或固定位置。 - 当通过JS设置内联CSS时，使用requestAnimationFrame来避免不必要的布局垃圾。
- (可能，可选)在悬停时隐藏光标，并使用popover元素作为位置指示器。
- 把你能做的一切从JS迁移到CSS ie。
:hover状态可用于切换弹出元素的显示。
我做了一个演示示例，结合了所有列出的内容。在光标位置和弹出图像之间仍然有一些延迟，并且原始问题中没有示例链接，所以我无法与其进行比较，但我希望有人会发现这一点很有用。
.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)' });
}参考文献：
Stack Overflow用户
发布于 2015-03-25 14:45:13
试试这个：
jQuery(document).ready(function(){
$(".imgWrap").mousemove(function(e){
e.stopPropagation();
mouseX = e.pageX;
mouseY = e.pageY;
});
})Stack Overflow用户
发布于 2015-03-20 19:13:55
如果绝对(x，y)位置不是那么重要(意思是:可以省略一些像素值而不破坏您的逻辑)，您可以尝试跳过mousemove-event的一些帧。
var globalSkipCounter = 0;
var globalSkipRate = 5;
$(".imgWrap").mousemove(function(e){
if(globalSkipCounter >= globalSkipRate){
var mouseX = e.pageX;
var mouseY = e.pageY;
do_stuff(mouseX, mouseY);
globalSkipCounter = 0;
}
else{
globalSkipCounter+=1;
}
});这样，您就可以省略在每个mousemove事件上重新绘制图像，而不是使用您的绘图例程(do_stuff)仅调用一次，每5个事件调用一次。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16868122
复制相关文章
相似问题