当前位置：首页 > VUE

VUE实现图片循环放大

2026-02-23 15:44:03VUE

VUE实现图片循环放大效果

通过CSS动画和Vue的数据绑定能力，可以实现图片循环放大效果。以下是两种常见实现方式：

使用CSS动画实现

在Vue组件的<style>部分定义关键帧动画，通过v-for循环渲染图片并应用动画：

<template>
  <div class="image-container">
    <img 
      v-for="(img, index) in images" 
      :key="index" 
      :src="img.src" 
      class="zooming-image"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { src: 'image1.jpg' },
        { src: 'image2.jpg' },
        { src: 'image3.jpg' }
      ]
    }
  }
}
</script>

<style>
.zooming-image {
  animation: zoomInOut 3s infinite alternate;
  width: 200px;
  height: auto;
  margin: 10px;
}

@keyframes zoomInOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
</style>

使用Vue动态样式绑定

通过数据驱动动态控制缩放比例，实现更灵活的交互效果：

<template>
  <div>
    <img
      v-for="(img, index) in images"
      :key="index"
      :src="img.src"
      :style="{
        transform: `scale(${img.scale})`,
        transition: 'transform 0.5s ease'
      }"
      @mouseover="startZoom(index)"
      @mouseout="stopZoom(index)"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { src: 'image1.jpg', scale: 1, interval: null },
        { src: 'image2.jpg', scale: 1, interval: null },
        { src: 'image3.jpg', scale: 1, interval: null }
      ]
    }
  },
  methods: {
    startZoom(index) {
      this.images[index].interval = setInterval(() => {
        this.images[index].scale += 0.01
        if (this.images[index].scale >= 1.2) {
          this.images[index].scale = 1
        }
      }, 50)
    },
    stopZoom(index) {
      clearInterval(this.images[index].interval)
      this.images[index].scale = 1
    }
  }
}
</script>

实现无限循环画廊效果

结合transition-group实现图片循环移动+缩放效果：

<template>
  <div class="gallery">
    <transition-group name="zoom" tag="div" class="gallery-container">
      <img
        v-for="(img, index) in visibleImages"
        :key="img.id"
        :src="img.src"
        class="gallery-img"
      />
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { id: 1, src: 'image1.jpg' },
        { id: 2, src: 'image2.jpg' },
        { id: 3, src: 'image3.jpg' }
      ],
      currentIndex: 0,
      visibleCount: 3
    }
  },
  computed: {
    visibleImages() {
      return this.images
        .slice(this.currentIndex, this.currentIndex + this.visibleCount)
        .concat(
          this.images.slice(0, Math.max(0, this.visibleCount - (this.images.length - this.currentIndex)))
        )
    }
  },
  mounted() {
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.images.length
    }, 3000)
  }
}
</script>

<style>
.gallery {
  overflow: hidden;
  width: 100%;
}

.gallery-container {
  display: flex;
  justify-content: center;
}

.gallery-img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin: 0 10px;
  transition: all 1s ease;
  transform: scale(0.9);
}

.zoom-enter-active, .zoom-leave-active {
  transition: all 1s ease;
}

.zoom-enter {
  transform: scale(0.5) translateX(-100px);
  opacity: 0;
}

.zoom-leave-to {
  transform: scale(0.5) translateX(100px);
  opacity: 0;
}
</style>