一、图片需要自己去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>