【无标题】

菜鸟小智

已于 2024-03-26 16:39:33 修改

阅读量114

点赞数 2

分类专栏： vue2+css+js 文章标签：前端 vue css3 es6 html5 javascript css

于 2024-03-22 14:45:02 首次发布

本文链接：https://blog.csdn.net/m0_51377626/article/details/136940252

版权

vue2+css+js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue2 中鼠标划入旋转切换图片现成代码!

js 图片切换 css 旋转图片

js 划入划出 @mouseenter , @mouseleave=“resetRotation” 切换图片
css 鼠标悬停时旋转图片 transform: rotateY(-180deg); transition: transform 0.5s; /* 添加过渡效果 / perspective: 1000px; / 添加透视效果 */

<template>
  <div class="image-container">
    <!-- 第一张这图片划入划出效果 -->
    <img
      v-if="showImage1"
      @mouseenter="rotateAndShowSecondImage"
      @mouseleave="resetRotation"
      :src="require('./13.jpg')"
      alt="First Image"
      class="image"
    />
    <!-- 第二张照片只要划出即可 -->
    <img
      v-else
      @mouseleave="resetRotation"
      :src="require('./36.jpg')"
      alt="Second Image"
      class="image"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 显示那张照片的 falg
      showImage1: true,
    };
  },
  methods: {
    // 鼠标划入 切换照片
    rotateAndShowSecondImage() {
      this.showImage1 = false;
    },
    // 鼠标划出 切换照片
    resetRotation() {
      this.showImage1 = true;
    }
  }
};
</script>

<style scoped>
.image-container {
  perspective: 1000px; /* 添加透视效果 */
}

.image {
  width: 50%;
  height: 50%;
  transition: transform 0.5s; /* 添加过渡效果 */
}

.image-container:hover .image {
  transform: rotateY(-180deg); /* 鼠标悬停时旋转图片 */
}
</style>