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)'});
}

CodePen： 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本身内时出现毛刺

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

正确地将Div角度指向光标

0 个答案: