javascript - jquery - 速度计箭头模仿，向鼠标旋转箭头

Question

我需要像这样实现一个功能:

根据鼠标的位置，箭头在何处移动:

当前代码从中心围绕箭头。问题:箭头应该只从左端绕过:

          var box=$(".box");
var boxCenter=[box.offset().left+box.width()/2, box.offset().top+box.height()/2];

$(document).mousemove(function(e){    


    var angle = Math.atan2(e.pageX- boxCenter[0],- (e.pageY- boxCenter[1]) )*(180/Math.PI);     

    box.css({ "-webkit-transform": 'rotate(' + angle + 'deg)'});    
    box.css({ '-moz-transform': 'rotate(' + angle + 'deg)'});
    box.css({ 'transform': 'rotate(' + angle + 'deg)'});

});


.box{
 background-image:url("Wheelizate Tabs - Apart left_files/tick.png");

    width: 200px;
    height: 30px;

    position: absolute;
    left: 200px;
    top: 200px;
}

  <div class="box" style="z-index:10000;margin-left: 70px;margin-top: 200px;"></div>

jsfiddle.net/tuz4y6r4/

Answer 1

您需要指定 transform-origin : center left; 以使 box 从左侧旋转。默认情况下，transform-origin 是 center center。检查工作 fiddle https://jsfiddle.net/63qxdg3b/