nuxt.js实现鼠标悬停图片及描述文字左右滑动效果

本文介绍如何在Nuxt.js项目中，实现鼠标悬停在缩略图上时，缩略图、原图和描述文字从右向左滑动的效果。我们将使用Swiper插件来完成此功能，因为它功能强大且易于定制。

解决方案：使用Swiper插件

Swiper是一个流行的JavaScript触摸滑块框架，可以轻松创建各种类型的滑块，包括我们需要的这种效果。

实施步骤：

1. 安装Swiper:

使用npm或yarn安装Swiper：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

<code class="bash">npm install swiper</code>

2. 导入Swiper组件及样式:

在你的Nuxt.js组件中，导入Swiper组件和样式：

<code class="vue"><template>
  <div class="swiper-container" ref="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://img.php.cn/" alt="Nuxt.js中如何实现鼠标悬停触发图片与描述文字从右向左滑动的效果？
" />
        <div class="overlay">
          <img src="https://img.php.cn/" alt="Nuxt.js中如何实现鼠标悬停触发图片与描述文字从右向左滑动的效果？
" />
          <p>{{ description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation'; // 如果需要导航按钮
import { Navigation } from 'swiper/modules';


export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      thumbnailSrc: '/path/to/thumbnail.jpg',
      fullsizeSrc: '/path/to/fullsize.jpg',
      description: '图片描述文字',
    };
  },
  mounted() {
    this.$nextTick(() => {
      new Swiper(this.$refs.swiper, {
        direction: 'horizontal', // 设置为'horizontal'实现左右滑动
        // 其他Swiper配置选项，例如：
        // autoplay: {
        //   delay: 2000,
        //   disableOnInteraction: false,
        // },
        modules: [Navigation], // 如果需要导航按钮
        navigation: true, // 如果需要导航按钮
      });
    });
  },
};
</script>

<style scoped>
.swiper-container {
  width: 300px; /* 设置容器宽度 */
  height: 200px; /* 设置容器高度 */
  overflow: hidden; /* 隐藏超出部分 */
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 图片和文字从右侧开始 */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none; /* 默认隐藏 */
}

.swiper-container:hover .overlay {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 文字从左侧开始 */
}
</style></code>

3. 添加鼠标悬停事件 (可选): 上面的代码已经利用Swiper的hover效果实现了图片和文字的显示和隐藏，如果需要更精细的控制，可以添加额外的鼠标悬停事件来控制Swiper的播放和暂停。

这段代码创建了一个简单的Swiper实例，设置了水平滑动方向。 你可以根据需要调整Swiper的配置选项，例如自动播放、循环播放等。 样式部分确保了图片和文字的布局和显示效果。 记得替换 /path/to/thumbnail.jpg 和 /path/to/fullsize.jpg 为你的图片路径。

通过以上步骤，你就可以在你的Nuxt.js项目中实现鼠标悬停触发图片和描述文字从右向左滑动的效果了。 记住根据你的设计调整CSS样式。