>source

이미지가 커서를 따라가면 제대로 회전하는 데 문제가 있습니다. 원래 위치를 기준으로 회전하는 것 같은데 잘 모르겠습니다.

최종 위치에 관계없이 완전히 360도 회전할 수 있는 기회가 있습니까?

원본 code:

<!DOCTYPE html><html><head><style>.box{
    background-color: black;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 200px;
    top: 200px;
}
</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head><body><div class="box" id="image">  </div><script>$(document).mousemove(function(e){
/*duration determines the speed of the animation (in this case, the speed to which prgm follows)*/
    $("#image").stop().animate({left:e.pageX, top:e.pageY}, {duration: 5000});
});
</script><script>let box= document.querySelector(".box");
let boxBoundingRect= box.getBoundingClientRect();
let boxCenter= {
    x: boxBoundingRect.left + boxBoundingRect.width/2,
  y: boxBoundingRect.top + boxBoundingRect.height/2
};
document.addEventListener("mousemove", e=> {
    let angle= Math.atan2(e.pageX -boxCenter.x, -(e.pageY -boxCenter.y) )*(180 /Math.PI);
    box.style.transform= `rotate(${angle}deg)`;
})
</script></body></html>

내 답변이 도움이 되었다면 선택한 답변으로 표시하십시오!

ThatBirdThatLearnedToCode2022-01-31 22:49:28
  • 답변 # 1

    코딩에 대해 알아야 할 사항:

    코딩할 때 다음과 같이 변수를 선언하면 생각보다 다르게 작동합니다.

    var var1= 2;
    var var2= var1;
    

    대신var2항상 가치가 있는var1, 그냥 설정var2무엇이든var1현재입니다.

    설정을 의미합니다.var13까지 계속 유지var22시에.

    혼란? 무슨 말인지 확인해보세요! (솔직히 이게 더 헷갈림)

    이것은 어떤 관련이 있습니까?

    다음 줄에서 다음을 수행합니다.

    let boxBoundingRect= box.getBoundingClientRect();
    let boxCenter= {
      x: boxBoundingRect.left + boxBoundingRect.width /2,
      y: boxBoundingRect.top + boxBoundingRect.height /2
    };
    

    하지만 위치가 변경되어도 해당 값은 변경되지 않습니다. 오히려 그들은 동일하게 유지됩니다.

    무슨 일을 하세요?

    이 기능에서:

    document.addEventListener("mousemove", e=> {
      let angle= Math.atan2(e.pageX -boxCenter.x, -(e.pageY -boxCenter.y)) * (180 /Math.PI);
      box.style.transform= `rotate(${angle}deg)`;
    })
    

    다음과 같이 보이도록 경계 상자를 다시 계산합니다.

    document.addEventListener("mousemove", e=> {
      boxBoundingRect= box.getBoundingClientRect();
      boxCenter= {
        x: boxBoundingRect.left + boxBoundingRect.width /2,
        y: boxBoundingRect.top + boxBoundingRect.height /2
      };
      let angle= Math.atan2(e.pageX -boxCenter.x, -(e.pageY -boxCenter.y)) * (180 /Math.PI);
      box.style.transform= `rotate(${angle}deg)`;
    })
    

    스니펫

    $(document).mousemove(function(e) {
      /*duration determines the speed of the animation (in this case, the speed to which prgm follows)*/
      $("#image").stop().animate({
        left: e.pageX,
        top: e.pageY
      }, {
        duration: 5000
      });
    });
    let box= document.querySelector(".box");
    let boxBoundingRect= box.getBoundingClientRect();
    let boxCenter= {
      x: boxBoundingRect.left + boxBoundingRect.width /2,
      y: boxBoundingRect.top + boxBoundingRect.height /2
    };
    document.addEventListener("mousemove", e=> {
      boxBoundingRect= box.getBoundingClientRect();
      boxCenter= {
        x: boxBoundingRect.left + boxBoundingRect.width /2,
        y: boxBoundingRect.top + boxBoundingRect.height /2
      };
      let angle= Math.atan2(e.pageX -boxCenter.x, -(e.pageY -boxCenter.y)) * (180 /Math.PI);
      box.style.transform= `rotate(${angle}deg)`;
    })

    .box {
      background-color: black;
      width: 30px;
      height: 30px;
      position: absolute;
      left: 200px;
      top: 200px;
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><body>  <div class="box" id="image"> </div></body>

  • 이전 ios : XCode 제공("CFBundleExecutable"이 지정되지 않음)
  • 다음 asp.net을 통한 Twilio First 샘플 프로그램이 작동하지 않음