How to create a mouse-following effect using HTML, CSS and jQuery-JS Tutorial-php.cn

How to create a mouse-following effect using HTML, CSS and jQuery

王林

Release： 2023-10-26 12:40:41

Original

1454 people have browsed it

How to create a mouse-following effect using HTML, CSS and jQuery

How to use HTML, CSS and jQuery to create a mouse-following special effect

Introduction
In website development, adding some special effects can improve the user experience and add Certain visual effects. A common special effect is mouse following, that is, during the movement of the mouse, elements can follow and change their position or style in real time. This article will introduce how to use HTML, CSS and jQuery to create a simple mouse following effect, and provide specific code examples.

HTML Structure
First, we need to create a basic HTML structure. Introduce the jQuery library and a custom CSS style sheet in the

tag. In the tag, create a box element to follow the mouse and add a text element as sample content.

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

Copy after login

CSS Style
Next, define the styles for the box element and text element in the CSS style sheet. In order to achieve the mouse following effect, we will use absolute positioning and JavaScript to dynamically change the position of the box.

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

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

Copy after login

jQuery code
Finally, write jQuery code in JavaScript to implement the mouse following effect. We need to listen to the mouse movement event and update the position of the box element in the event handler.

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

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

Copy after login

Complete code
Integrate the above HTML code, CSS style and jQuery code. The complete sample code is as follows:

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

Copy after login

Summary
By using HTML, CSS and jQuery, We can easily create a mouse-following effect. The code examples provided above can help you understand how to implement this special effect, and can be further adjusted and expanded according to your own needs. Hope this article is helpful to you!

The above is the detailed content of How to create a mouse-following effect using HTML, CSS and jQuery. For more information, please follow other related articles on the PHP Chinese website!