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;的{​​{1}}从左侧旋转。默认情况下，box为transform-origin。查看工作小提琴https://jsfiddle.net/63qxdg3b/