轮播图 鼠标移入放大，移出还原

 

<template>
	<swiper :slides-per-view="1" pagination navigation class="banner" :modules="modules">
		<swiper-slide v-for="(slide, index) in slides" :key="index">
			<img
				:src="slide.image"
				:alt="slide.alt"
				style="width: 300px; height: 300px; overflow: hidden"
				class="banner-image"
				@mouseenter="mouseOver(index)"
				@mouseleave="mouseLeave(index)" />
		</swiper-slide>
	</swiper>
</template>
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules'
import 'swiper/swiper-bundle.css'
import { ref } from 'vue'
const slides = ref([
	{
		image:
			'https://img2.baidu.com/it/u=3064513872,3876540107&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1737046800&t=51e0dfc9aa60912f87bfd942a53cd787',
		alt: 'Slide 1'
	},
	{
		image:
			'https://img2.baidu.com/it/u=4006946835,4011191580&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1737046800&t=f457ba015a9c767db1b6a3a7111432ed',
		alt: 'Slide 2'
	},
	{
		image:
			'https://img2.baidu.com/it/u=2028106603,533103107&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1737046800&t=2c85f60716f88bf7eb1efaff9f16dbbe',
		alt: 'Slide 3'
	}
])
const modules = ref([Navigation, Pagination, Scrollbar, A11y])
const mouseOver = (index) => {
	let imgsrc = document.getElementsByClassName('banner-image')
	imgsrc[index].style.position = 'absolute'
	imgsrc[index].style.top = '50%'
	imgsrc[index].style.left = '50%'
	imgsrc[index].style.animation = 'expand 1s ease-out forwards'
}
const mouseLeave = (index) => {
	let imgsrc = document.getElementsByClassName('banner-image')
	imgsrc[index].style.position = 'absolute'
	imgsrc[index].style.top = '50%'
	imgsrc[index].style.left = '50%'
	imgsrc[index].style.animation = 'leave 1s ease-out forwards'
}
</script>
<style>
.banner {
	width: 300px;
	height: 300px;
	cursor: pointer;
}
.banner-image {
	width: 400px;
	height: 400px;
}
@keyframes expand {
	0% {
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		transform: translate(-50%, -50%) scale(1.2);
	}
}

@keyframes leave {
	0% {
		transform: translate(-50%, -50%) scale(1.2);
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
	}
}
</style>