javascript - 正确倾斜 Div 以指向光标

Question

我在指向光标的容器内创建了一个 div。问题是精度已关闭，我需要更改角度。

HTML

<div class="shooting_container">
            <div class="shooter">
                <div class="shooting_arm">
                </div>
            </div>
</div>

CSS

.shooter {
    height: 480px;
    width: 200px;
    background-color: white;
    bottom: 150px;
    margin: 0 100px;
    position: absolute;

    .shooting_arm {
        height: 245px;
        width: 166px;
        bottom: 500px;
        position: absolute;
        top: calc(50% - 40px);
        transform: translateY(-50%) rotate(-12deg);
        z-index: 500;
        transform-origin: 156px 8px;
        left: -43px;
    background-color: red;

    // Where the transform origin lies
        &::after {
          position: absolute;
          top: 8px;
          left: 156px;
          width: 5px;
          height: 5px;
          content: '';
          background-color: #f0f;
          border-radius: 50%;
          transform: translate(-50%, -50%);
        }



    }

}

JS

$(document).on('mousemove', moveCursor);

function moveCursor(e) {

    var box = $(".shooter .shooting_arm");

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

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

    if (angle < -160) {
        angle = -0;
    }
    setArm(box, angle);

}
function setArm(arm, angle) {
    arm.css({ "-webkit-transform": 'translateY(-50%) rotate(' + angle + 'deg)'});    
    arm.css({ '-moz-transform': 'translateY(-50%) rotate(' + angle + 'deg)'});
}

代码笔： https ://codepen.io/anon/pen/vrWJwZ

问题1：角度不正确，随着你的移动而不同

角度不对。我需要容器的顶部与光标对齐，而不是中心。我尝试调整：

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

至

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

但它仍然不符合容器的顶部。

问题 2：当光标在 div 本身内时出现故障

由于某种原因，当光标在容器内并导致它抖动时，它会返回两个不同的角度值。为什么这样做？

标签： javascriptjqueryhtmlcss