gpt4 book ai didi

javascript - 使用 jQuery 更改 -webkit-transform 未按预期工作

转载 作者:太空宇宙 更新时间:2023-11-04 12:33:27 25 4
gpt4 key购买 nike

我制作了一个简单的 jQuery 脚本来创建一条线并使其随光标一起移动。 Find its fiddle here.

这就是我分配斜率的方式

$("#line").css({
"width": + width +"px",
"height": "4px",
"-webkit-transform": "rotate(" + slope + "deg)",
"-moz-transform": "rotate(" + slope + "deg)"
});

该行在 Chrome 中闪烁,在 Firefox 中不工作。这可能是什么原因?

最佳答案

尽管正如所指出的,建议使用不带 vendor 前缀的transform(因为jQuery 自动 为您添加 vendor 前缀),但这不是问题的根源。我意识到使用 event.offsetXevent.offsetY 会给出相互冲突的值,这些值会在 mousemove 时不断地在正值和负值之间翻转,导致斜率计算变得乏味(因此闪烁).

我创建了一个 fork of your fiddle演示 offsetX/YclientX/Y 测量有何不同,以及为什么使用后者更可取:

相反,使用 .clientX.clientY 对象:

$(document).bind("mousemove", function(event) {
if (getClickStarted){

if (event && event.preventDefault){
event.preventDefault();
}

// Use clientX/Y instead of offsetX/Y
curX = event.clientX;
curY = event.clientY;

var width = Math.sqrt(Math.pow(curX - centerX, 2) + Math.pow(curY - centerY, 2));
var slope = Math.atan2(curY - centerY, curX - centerX)*180/Math.PI;

// Use unprefixed transform
$("#line").css({
"width": + width +"px",
"height": "4px",
"transform": "rotate(" + slope + "deg)"
});
}
});

请在此处查看固定 fiddle :http://jsfiddle.net/teddyrised/hepbob75/12/

关于javascript - 使用 jQuery 更改 -webkit-transform 未按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27462403/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com