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

    
    
    



    

    
这是一个鼠标跟随的特效

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:

    
    
    



    

    
这是一个鼠标跟随的特效

    

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!