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

Question

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

这就是我分配斜率的方式

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

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

Answer 1

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

我创建了一个 fork of your fiddle演示 offsetX/Y 和 clientX/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/