SeouliteLab

jQuery .mousemove() 메서드: 마우스 이동 감지하기 본문

카테고리 없음

jQuery .mousemove() 메서드: 마우스 이동 감지하기

Seoulite Lab 2024. 4. 4. 08:58

예제 1: 마우스 위치 표시하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mousemove() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(document).mousemove(function(event){
        $("#coordinates").text("X: " + event.pageX + ", Y: " + event.pageY);
      });
    });
  </script>
</head>
<body>
  <div id="coordinates"></div>
</body>
</html>

설명: 이 예제는 마우스 이동 시 마우스의 X 및 Y 좌표를 실시간으로 표시합니다.

예제 2: 마우스 이동에 따른 요소 스타일 변경하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mousemove() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(document).mousemove(function(event){
        var color = "rgb(" + event.pageX + ", " + event.pageY + ", 100)";
        $("body").css("background-color", color);
      });
    });
  </script>
</head>
<body>
  <p>마우스를 이동하세요.</p>
</body>
</html>

설명: 이 예제에서는 마우스의 X 및 Y 좌표를 사용하여 body의 배경색을 동적으로 변경합니다.

예제 3: 마우스 이동 시 이펙트 적용하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mousemove() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(document).mousemove(function(event){
        $("#box").stop().animate({
          left: event.pageX,
          top: event.pageY
        }, 100);
      });
    });
  </script>
  <style>
    #box { position: absolute; width: 50px; height: 50px; background-color: red; }
  </style>
</head>
<body>
  <div id="box"></div>
</body>
</html>

설명: 이 예제에서는 마우스가 이동할 때마다 상자를 따라 움직이는 이펙트를 적용합니다.

예제 4: 마우스 이동에 따른 툴팁 표시하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mousemove() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(document).mousemove(function(event){
        $("#tooltip").css({
          top: event.pageY + 10,
          left: event.pageX + 10
        });
      });
    });
  </script>
  <style>
    #tooltip { position: absolute; background-color: #fff; border: 1px solid #000; padding: 5px; }
  </style>
</head>
<body>
  <div id="tooltip">마우스 위치를 표시하는 툴팁입니다.</div>
</body>
</html>

설명: 이 예제에서는 마우스의 위치에 따라 동적으로 툴팁을 표시합니다.

예제 5: 이미지 확대/축소하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mousemove() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(document).mousemove(function(event){
        var scale = event.pageX / $(window).width();
        $("#image").css("transform", "scale(" + scale + ")");
      });
    });
  </script>
  <style>
    #image { width: 200px; height: auto; transition: transform 0.1s ease; }
  </style>
</head>
<body>
  <img src="example.jpg" id="image">
</body>
</html>

설명: 이 예제에서는

마우스의 X 좌표에 따라 이미지의 크기를 동적으로 조절하여 확대 또는 축소합니다.

저작자표시 비영리 변경금지 (새창열림)