广告网站制作多少钱_漳州疫情最新情况_建站平台哪个好_谷歌浏览器下载安装2023最新版

我们在电脑端打开b站首页时，总会被顶部【鼠标跟随】的效果所吸引，那他是如何实现的，来研究一下。

b站效果：

分析：

1.监听鼠标的位置，当悬浮到该模块时，图片会随鼠标移动

2.引入图片的样式是动态的，会随鼠标移动而改变

实验：

1.准备好基本图片

背景也添加一个图片

<div class="banner" ><img src="../assets/images/nav/castalia.png" alt="Background"><img  src="../assets/images/cat.png" alt="Background">
</div>

.banner {margin: auto;width: 120%;height: 400px;border-radius: 8px;background: url(@/assets/images/backimage4.jpeg) no-repeat;background-size: cover;}

2.实现监听鼠标位置

引入三个方法，分别监听鼠标移动时的状态

<div class="banner" @mousemove="onMouseMove"></div>

3.鼠标移动时改变样式

分别为背景和两张图片添加绑定样式

<div class="banner" :style="textStyle" @mousemove="onMouseMove" ><img :style="pngStyle1" src="../assets/images/nav/castalia.png" alt="Background"><img :style="textStyle" src="../assets/images/cat.png" alt="Background"></div>

设定样式初始值

const startX = ref(0);
const currentX = ref(0);
const pngStyle = ref({transition: 'transform 0.3s',transform: 'translate(0px, 0px)',
});
const pngStyle1 = ref({transition: 'transform 0.2s',transform: 'translate(0px, 0px)',
});
const textStyle = ref({transition: 'transform 0.1s',transform: 'translate(0px, 0px)',
});

设定方法：

const onMouseMove = (event) => {currentX.value = event.clientX;//鼠标事件发生时，鼠标指针相对于浏览器窗口的 X 坐标const disx = currentX.value - startX.value;//计算鼠标从开始位置到当前位置的水平距离。const move = disx / 18;//设定图片应该移动的距离const move1 = -disx / 18;const move2 = -disx / 14;pngStyle.value.transform = `translate(${move}px, 0px)`;pngStyle1.value.transform = `translate(${move}px, 0px)`;textStyle.value.transform = `translate(${move1}px, 0px)`;
};

这样一个基本效果就完成了，可以根据自己想要的效果增加图片，调解移动的距离，移动的方向等。

大家加油！！！