正文

跟着鼠标走的动态div盒子：轻松实现JavaScript鼠标跟随效果教程

/0 浏览量
0718

在网页设计中，实现鼠标跟随效果可以让用户界面更加生动有趣。本文将带你轻松实现一个跟着鼠标走的动态div盒子，通过JavaScript和CSS的简单技巧，让你的网页动起来。

准备工作

在开始之前，请确保你的网页中已经包含了HTML、CSS和JavaScript的基本结构。以下是一个简单的HTML结构示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>鼠标跟随效果</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="follower" class="follower"></div>
    <script src="script.js"></script>
</body>
</html>

接下来，我们需要为这个div盒子添加一些CSS样式，使其看起来更加美观。

CSS样式

在styles.css文件中，我们可以为.follower类添加一些基本的样式：

.follower {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    position: absolute;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

这里，我们为div盒子设置了宽度和高度，背景颜色，绝对定位，以及一个圆形的边框。transition属性将使div盒子的移动更加平滑。

JavaScript实现

接下来，我们需要使用JavaScript来控制div盒子的移动。在script.js文件中，我们可以添加以下代码：

document.addEventListener('DOMContentLoaded', function() {
    var follower = document.getElementById('follower');

    document.addEventListener('mousemove', function(e) {
        var posX = e.clientX;
        var posY = e.clientY;

        follower.style.transform = 'translate(' + posX + 'px, ' + posY + 'px)';
    });
});

这段代码首先获取了div盒子的DOM元素，然后为整个文档添加了一个mousemove事件监听器。当鼠标在页面上移动时，会触发这个事件，并执行一个函数。在这个函数中，我们获取了鼠标的当前坐标，并使用transform属性将div盒子移动到鼠标所在的位置。

完成效果

现在，当你将鼠标移动到页面上时，你应该能看到一个跟着鼠标走的动态div盒子。你可以通过调整CSS样式和JavaScript代码来改变盒子的外观和移动效果。

总结

通过本文的教程，你学会了如何使用JavaScript和CSS实现鼠标跟随效果。这个效果可以让你的网页更加生动有趣，提升用户体验。希望这篇文章对你有所帮助！

-- 展开阅读全文 --