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

虽然有人指出建议使用没有供应商前缀的transform（因为jQuery 自动为您添加供应商前缀），但这不是问题的根源。我意识到使用event.offsetX和event.offsetY会给出相互冲突的值，这些值会在鼠标移动时不断地在正值和负值之间翻转，从而导致斜率计算被忽略（因此闪烁）。

我创建了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)"
        });
    }
});

请参阅此处的固定小提琴：http://jsfiddle.net/teddyrised/hepbob75/12/

Answer 2

您没有使用标准transform：

$("#line").css({
   "width": + width +"px", 
   "height": "4px", 
   "-webkit-transform": "rotate(" + slope + "deg)", 
   "-moz-transform": "rotate(" + slope + "deg)",
   "transform": "rotate(" + slope + "deg)"//make sure works in newer browsers
});

顺便说一下，这也应该有效：

$("#line").css({
  "width": + width +"px", 
  "height": "4px", 
  "transform": "rotate(" + slope + "deg)"// jQuery adds vendor prefixes.
});

使用jQuery更改-webkit-transform不能按预期工作

2 个答案: