Maison >interface Web >js tutoriel >Comment créer un effet de suivi de la souris en utilisant HTML, CSS et jQuery

Comment créer un effet de suivi de la souris en utilisant HTML, CSS et jQuery

王林original: 2023-10-26 12:40:411469parcourir

Comment utiliser HTML, CSS et jQuery pour créer un effet spécial de suivi de la souris

Introduction
Dans le développement de sites Web, l'ajout d'effets spéciaux peut améliorer l'expérience utilisateur et ajouter un certain effet visuel. Un effet spécial courant est le suivi de la souris, ce qui signifie que les éléments peuvent suivre et modifier leur position ou leur style en temps réel lorsque la souris se déplace. Cet article explique comment utiliser HTML, CSS et jQuery pour créer un simple effet de suivi de souris et fournit des exemples de code spécifiques.

Structure HTML
Tout d'abord, nous devons créer une structure HTML de base. Introduisez la bibliothèque jQuery et une feuille de style CSS personnalisée dans la balise

. Dans la balise , créez un élément de boîte pour suivre la souris et ajoutez un élément de texte comme exemple de contenu.

<!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>

Styles CSS
Ensuite, définissez les styles pour l'élément de boîte et l'élément de texte dans la feuille de style CSS. Afin d'obtenir l'effet de suivi de la souris, nous utiliserons le positionnement absolu et JavaScript pour modifier dynamiquement la position de la boîte.

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

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

code jQuery
Enfin, écrivez du code jQuery en JavaScript pour implémenter l'effet de suivi de la souris. Nous devons écouter l'événement de mouvement de la souris et mettre à jour la position de l'élément box dans le gestionnaire d'événements.

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

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

Code complet
Intégrez le code HTML, le style CSS et le code jQuery ci-dessus. L'exemple de code complet est le suivant :

<!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>

Résumé
En utilisant HTML, CSS et jQuery, nous pouvons facilement créer une souris suivant un effet spécial. Les exemples de code fournis ci-dessus peuvent vous aider à comprendre comment implémenter cet effet spécial et peuvent être ajustés et étendus en fonction de vos propres besoins. J'espère que cet article vous sera utile !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript jquery css html 事件样式表

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser Layui pour obtenir un effet d'affichage de flux de cascade d'imagesArticle suivant：Comment utiliser Layui pour obtenir un effet d'affichage de flux de cascade d'images

Articles Liés

Voir plus