仿bilibili鼠标经过轮播图跟着移动效果

一、图片需要自己去bilibili下载

复制链接在浏览器中打开然后下载到本地，直接使用链接是不行的

二、定义数据并渲染

<script setup lang="ts">
import { ref, onMounted } from 'vue'
type imgType = {
  src: string, // 本地图片地址
  multiple?: number, // 移动
  opacity?: number // 放大
}
// 图片数组
const imgs = ref<Array<imgType>>([{
  src: './assets/75ec2d45ce8c942a1f7379d4641171da4d90ab0d.png@1c.webp',
}, {
  src: './assets/286eb259a60a0eabfcde96d7ea92d239fe68b3fe.png@1c.webp',
  multiple: 1.5,
  opacity: 3
}, {
  src: './assets/d6c941cf2d5fc6c717173f7e3f166dbc444aa15b.png@1c.webp',
  multiple: 0.5
}, {
  src: './assets/782d55aeca6cc75f51d2d630005f514a61a0ddfa.png@1c.webp',
}, {
  src: './assets/27e411d92729604aa594858beb5130ed60aad76d.png@1c.webp',
  multiple: 1.5,
  opacity: 3
}, {
  src: './assets/09d0855b6b6d6965e8f02404777986237848c6c9.png@1c.webp',
  multiple: 2,
  opacity: 2
}, {
  src: './assets/40878bbef514e2d4bf5d660fe1145c869567bec2.png@1c.webp',
  multiple: 2,
  opacity: 2
}, {
  src: './assets/42485baddbca05d2c4c7710a0b76b74d303e06d7.png@1c.webp',
  multiple: 1
}, {
  src: './assets/8ea0e95a8e5fc85ae227810925dba1ace1e9fcba.png@1c.webp',
  multiple: 1
}, {
  src: './assets/c13ca9c6405c71bf864ed2bc421680cb437f45ef.png@1c.webp',
  multiple: 2,
  opacity: -10
}, {
  src: './assets/a43c6833d262301373234ffbd6934559d2ce7fb2.png@1c.webp',
  multiple: 1.5,
  opacity: 3
}, {
  src: './assets/ce8c5e45230a6d3805baf60f5916f1cd441aac8e.png@1c.webp',
  multiple: 1.5
}, {
  src: './assets/cbf19f3682dfb02e62557d07fefaf241a80296a1.png@1c.webp',
  multiple: 1
}, {
  src: './assets/7998ca9f0bc267375fb7b45f75626d96806f94d7.png@1c.webp',
  multiple: 1
}, {
  src: './assets/198efffbc58493300854c04ab0ea8d979a6f9223.png@1c.webp',
  multiple: 1
}, {
  src: './assets/142a486b8dd500a626a60b68ad993af8dabc8b55.png@1c.webp',
  multiple: 1,
  opacity: 1
}, {
  src: './assets/bb6266e1525a51f7920fc8881e47cadeee271b0c.png@1c.webp',
  multiple: 1.5,
  opacity: 3
}, {
  src: './assets/cd68251cde11936871237ca94360acb451bf7ed2.png@1c.webp',
  multiple: 1
}])
onMounted(() => {
  imgs.value.forEach((item: imgType, index: number) => {
    // 图片地址转换
    imgs.value[index].src = new URL(item.src, import.meta.url).href
  })
  innerWidth.value = window.innerWidth
})
const innerWidth = ref<number>(0)
const translate = ref<number>(0)
// 鼠标移动事件
const mousemove = (e: any) => {
  // console.log(e.offsetX);
  let half_width = innerWidth.value / 2
  let cha = half_width - e.offsetX
  let num = Number((cha / half_width).toFixed(2))
  translate.value = num * 30
}
</script>

<template>
  <div class="box" @mousemove="mousemove">
    <div class="layer" v-for="(item, index) in imgs" :key="index">
      <img
        :style="{ transform: `translate(${item.multiple && translate * item.multiple || 0}px)
          scale(${item.opacity && 1 - translate * item.opacity / 500 || 1})
          rotate(0deg)` }"
        :src="item.src" />
    </div>
  </div>
</template>

<style>
body {
  margin: 0;
}

.box {
  position: relative;
}

.box .layer {
  position: absolute;
  width: 100%;
  height: 138px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.box .layer img {
  width: 110%;
  opacity: 1;
}
</style>