HTML, CSS 및 jQuery를 사용하여 마우스 따라가는 효과를 만드는 방법-JS 튜토리얼-php.cn

HTML, CSS 및 jQuery를 사용하여 마우스 따라가는 효과를 만드는 방법

王林

풀어 주다： 2023-10-26 12:40:41

원래의

1338명이 탐색했습니다.

HTML, CSS 및 jQuery를 사용하여 마우스 따라가는 효과를 만드는 방법

HTML, CSS, jQuery를 사용하여 마우스를 따라가는 특수 효과를 만드는 방법

소개
웹사이트 개발에서 일부 특수 효과를 추가하면 사용자 경험이 향상되고 특정 시각적 효과를 추가할 수 있습니다. 일반적인 특수 효과는 마우스 따라가기입니다. 즉, 마우스를 움직이는 동안 요소가 실시간으로 위치나 스타일을 따르고 변경할 수 있습니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 간단한 마우스 따라가기 효과를 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

HTML 구조
먼저 기본 HTML 구조를 만들어야 합니다.

태그에 jQuery 라이브러리와 사용자 정의 CSS 스타일 시트를 추가하세요. 태그에서 마우스를 따라가는 상자 요소를 만들고 텍스트 요소를 샘플 콘텐츠로 추가합니다.

<!DOCTYPE html>
<html>
<head>
    <title>鼠标跟随特效</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="follower"></div>
    <h1>这是一个鼠标跟随的特效</h1>
</body>
</html>

로그인 후 복사

CSS 스타일
다음으로 CSS 스타일시트에서 상자 요소와 텍스트 요소의 스타일을 정의하세요. 마우스 추종 효과를 얻기 위해 절대 위치 지정 및 JavaScript를 사용하여 상자 위치를 동적으로 변경합니다.

#follower {
    position: absolute;
    background-color: red;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    opacity: 0.5;
}

h1 {
    margin-top: 200px;
    text-align: center;
}

로그인 후 복사

jQuery code
마지막으로 JavaScript로 jQuery 코드를 작성하여 마우스 추종 효과를 구현합니다. 마우스 이동 이벤트를 수신하고 이벤트 핸들러에서 상자 요소의 위치를 업데이트해야 합니다.

$(document).mousemove(function(event) {
    // 获取鼠标的坐标
    var mouseX = event.pageX;
    var mouseY = event.pageY;

    // 将盒子元素的位置设置为鼠标的坐标
    $("#follower").css("left", mouseX + "px");
    $("#follower").css("top", mouseY + "px");
});

로그인 후 복사

전체 코드
위의 HTML 코드, CSS 스타일 및 jQuery 코드를 통합하면 전체 샘플 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <title>鼠标跟随特效</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
    #follower {
        position: absolute;
        background-color: red;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        opacity: 0.5;
    }

    h1 {
        margin-top: 200px;
        text-align: center;
    }
    </style>
</head>
<body>
    <div id="follower"></div>
    <h1>这是一个鼠标跟随的特效</h1>

    <script>
    $(document).mousemove(function(event) {
        // 获取鼠标的坐标
        var mouseX = event.pageX;
        var mouseY = event.pageY;

        // 将盒子元素的位置设置为鼠标的坐标
        $("#follower").css("left", mouseX + "px");
        $("#follower").css("top", mouseY + "px");
    });
    </script>
</body>
</html>

로그인 후 복사

요약
HTML, CSS 및 jQuery를 사용하면 특수 효과를 따르는 마우스를 쉽게 만들 수 있습니다. 위에 제공된 코드 예제는 이 특수 효과를 구현하는 방법을 이해하는 데 도움이 될 수 있으며 필요에 따라 추가로 조정하고 확장할 수 있습니다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 HTML, CSS 및 jQuery를 사용하여 마우스 따라가는 효과를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!