Home >Web Front-end >JS Tutorial >How to create a mouse-following effect using HTML, CSS and jQuery

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

王林Original: 2023-10-26 12:40:411452browse

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>

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;
}

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");
});

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>

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!

JavaScript jquery css html 事件样式表

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use Layui to achieve picture waterfall flow display effectNext article：How to use Layui to achieve picture waterfall flow display effect

See more

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

Related articles