【愚公系列】《循序渐进Vue.js 3.x前端开发实践》019-案例：随鼠标移动的小球
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳...
| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。 |
| 近期荣誉 | 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。 |
| 博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
| 欢迎 | 👍点赞、✍评论、⭐收藏 |
🚀前言
在前端开发中，交互效果不仅能增强用户体验，还能让网页更具吸引力和趣味性。通过简单的动画和动态效果，我们可以为用户提供更生动的交互体验。本篇文章将通过一个具体的案例——“随鼠标移动的小球”，来演示如何使用 Vue 实现这一效果。
在这个案例中，我们将创建一个小球，该小球能够根据鼠标的移动轨迹实时跟随光标。我们将探讨如何使用 Vue 的事件监听机制来捕捉鼠标移动事件，并通过数据绑定和样式动态更新小球的位置。此外，我们还将介绍一些基本的 CSS 动画技巧，以提升整体效果。
🚀一、案例：随鼠标移动的小球
🔎1.HTML 部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆球游戏</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
.container {
margin: 0;
padding: 0;
position: absolute;
width: 440px;
height: 440px;
background-color: blanchedalmond;
display: inline;
}
.ball {
position: absolute;
width: 60px;
height: 60px;
left: 100px;
top: 100px;
background-color: red;
border-radius: 30px;
z-index: 100;
}
</style>
</head>
<body>
<div id="Application">
<!-- 外层的div为游戏面板，小球需要在此容器中移动 -->
<div class="container" @mousemove.stop="move">
<!-- 此div元素表示小球 -->
<div class="ball" :style="{left: offsetX + 'px', top: offsetY + 'px'}">
</div>
</div>
</div>
<script>
const {createApp, ref} = Vue
const config = {
setup() {
const offsetX = ref(0)
const offsetY = ref(0)
const move = (event) => {
// 控制小球在水平方向上的移动范围
if (event.clientX + 30 > 440) {
offsetX.value = 440 - 60 // 保证小球不会超出右边界
} else if (event.clientX - 30 < 0) {
offsetX.value = 0 // 保证小球不会超出左边界
} else {
offsetX.value = event.clientX - 30 // 设置小球的新位置
}
// 控制小球在垂直方向上的移动范围
if (event.clientY + 30 > 440) {
offsetY.value = 440 - 60 // 保证小球不会超出下边界
} else if (event.clientY - 30 < 0) {
offsetY.value = 0 // 保证小球不会超出上边界
} else {
offsetY.value = event.clientY - 30 // 设置小球的新位置
}
}
return { offsetX, offsetY, move }
}
}
createApp(config).mount("#Application")
</script>
</body>
</html>
🔎2.结构和样式部分解析
-
HTML 结构
<div id="Application">：这是 Vue 应用的根元素。Vue 会将应用挂载在这个元素下。<div class="container" @mousemove.stop="move">：这个div作为游戏的面板，承载小球并监听鼠标移动事件@mousemove。这里使用.stop修饰符阻止事件冒泡，避免它影响到父元素。<div class="ball" :style="{left: offsetX + 'px', top: offsetY + 'px'}">：这个div表示圆球，并且它的位置通过 Vue 的绑定机制动态地跟随offsetX和offsetY值的变化。
-
样式部分
body标签的样式：通过设置margin: 0; padding: 0;移除默认的页面边距，使整个页面的布局更加灵活。.container：这是游戏区域的样式，设置了固定大小（440px x 440px），背景色为blanchedalmond，并使用position: absolute来绝对定位。.ball：这是小球的样式，设置了宽高为60px，背景颜色为red，并通过border-radius: 30px使其变成圆形。
🔎3.Vue 3 逻辑部分
Vue 3 用于管理状态和响应式的数据绑定。我们通过 setup 函数定义了应用的逻辑。
-
引入 Vue 3 的功能
const { createApp, ref } = Vue: 这是从 Vue 3 导入的createApp和ref函数。createApp用来创建一个 Vue 应用实例，ref用于创建响应式的引用对象。
-
定义响应式变量
const offsetX = ref(0)和const offsetY = ref(0)：这两个变量用于存储小球的当前水平和垂直位置，并通过ref使其变为响应式。
-
定义移动事件处理函数
const move = (event) => { ... }：这是鼠标移动时触发的事件处理函数，负责根据鼠标的位置更新offsetX和offsetY的值，从而控制小球的移动。event.clientX和event.clientY获取的是鼠标相对于浏览器窗口的位置。offsetX.value = event.clientX - 30：这里的30是为了确保小球的中心位置与鼠标位置对齐，因为小球的宽高为60px，半径为30px。
-
边界控制
- 如果鼠标移动到容器的边缘，
offsetX和offsetY会被限制在有效范围内，确保小球不会超出容器的边界：- 水平方向：
event.clientX + 30 > 440会限制小球不超出右边界。 - 垂直方向：
event.clientY + 30 > 440会限制小球不超出下边界。
- 水平方向：
- 如果鼠标移动到容器的边缘，
🔎4.总结代码逻辑
-
Vue 应用创建：通过
createApp(config).mount("#Application")创建并挂载了一个 Vue 应用，config里面包含了setup函数，该函数定义了小球的当前位置以及鼠标移动时的事件处理逻辑。 -
鼠标移动逻辑：当鼠标在
.container容器内移动时，move方法会更新小球的位置，确保小球的中心跟随鼠标移动，同时保证小球不会超出容器的边界。 -
动态样式：使用 Vue 的绑定机制，
offsetX和offsetY直接绑定到小球div的left和top样式属性上，使得小球在容器内根据鼠标位置动态移动。
这个游戏的核心是通过 Vue 的响应式机制和事件绑定，实现了一个简单的鼠标控制小球的效果，同时还通过条件判断确保小球不会超出容器的范围。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）