HTML、CSS、jQuery を使用してマウス追従エフェクトを作成する方法-jsチュートリアル-php.cn

HTML、CSS、jQuery を使用してマウス追従エフェクトを作成する方法

王林

リリース： 2023-10-26 12:40:41

オリジナル

1460 人が閲覧しました

HTML、CSS、jQuery を使用してマウス追従エフェクトを作成する方法

HTML、CSS、jQuery を使用してマウス追従特殊効果を作成する方法

はじめに
Web サイト開発では、特殊効果を追加するとユーザーの操作性が向上します。特定の視覚効果を体験して追加します。一般的な特殊効果はマウスの追従です。つまり、マウスの移動中に要素がリアルタイムで追従し、その位置やスタイルを変更できます。この記事では、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 コード
最後に、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 中国語 Web サイトの他の関連記事を参照してください。