话不多说上代码
HTML部分
<template>
<div id="home">
<!-- 在父级标签中绑定时间 -->
<div class="home" @mousemove="parallax">
<!-- 设置图片的偏移量 (data-speed) -->
<div class="bg-dian"></div>
<div class="bg-red layer" data-speed="-5"></div>
<div class="bg-blue layer" data-speed="5"></div>
<div class="bg layer" data-speed="20"></div>
<div class="gt"></div>
</div>
</div>
</template>
JS部分
export default {
methods: {
parallax(e) {
document.querySelectorAll(".layer").forEach((layer) => {
const speed = layer.getAttribute("data-speed") || 2;
const x = (window.innerWidth - e.pageX * speed) / 100;
const y = (window.innerHeight - e.pageY * speed) / 100;
//设置 X轴和Y轴同时同时移动
layer.style.transform = `translateX(${x}px)`,`translateY(${y}px)`;
});
},
},
}