vuejs使一个小笑脸跟随鼠标移动
时间: 2024-05-14 10:12:36 浏览: 26
首先,在Vue组件中定义一个小笑脸的元素,比如一个div:
```
<template>
<div class="smiley-face"></div>
</template>
```
然后,在组件的script块中,定义一个data属性,用来保存小笑脸的位置信息:
```
<script>
export default {
data() {
return {
smileyFaceX: 0,
smileyFaceY: 0
}
}
}
</script>
```
接着,监听鼠标移动事件,更新小笑脸的位置:
```
<script>
export default {
data() {
return {
smileyFaceX: 0,
smileyFaceY: 0
}
},
mounted() {
window.addEventListener('mousemove', this.updateSmileyFacePosition);
},
methods: {
updateSmileyFacePosition(event) {
this.smileyFaceX = event.pageX;
this.smileyFaceY = event.pageY;
}
}
}
</script>
```
最后,在组件的样式表中,通过绝对定位和transform属性,让小笑脸跟随鼠标移动:
```
<style>
.smiley-face {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
background-image: url('smiley-face.png');
background-size: contain;
transform: translate(-50%, -50%);
}
</style>
```
其中,translate(-50%, -50%)表示将元素向左上方移动自身宽度和高度的一半,以便让元素的中心点与鼠标位置重合。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)