vue3前端开发-小兔鲜项目-图片切换效果和动态class

news2024/11/15 20:00:13

vue3前端开发-小兔鲜项目-图片切换效果和动态class!这次实现的效果是,图片预览效果,根据小图片,来实时改变大图(预览)的效果。同时让动态的特征class也跟着显示出来。


<script setup>
import {ref} from 'vue'
// 图片列表
const imageList = [
  "https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png",
  "https://yanxuan-item.nosdn.127.net/e801b9572f0b0c02a52952b01adab967.jpg",
  "https://yanxuan-item.nosdn.127.net/b52c447ad472d51adbdde1a83f550ac2.jpg",
  "https://yanxuan-item.nosdn.127.net/f93243224dc37674dfca5874fe089c60.jpg",
  "https://yanxuan-item.nosdn.127.net/f881cfe7de9a576aaeea6ee0d1d24823.jpg"
]
const activeIndex = ref(0)
const enterhandler = (i)=>{
    activeIndex.value = i
}
</script>


<template>
  <div class="goods-image">
    <!-- 左侧大图-->
    <div class="middle" ref="target">
      <img :src="imageList[activeIndex]" alt="" />
      <!-- 蒙层小滑块 -->
      <div class="layer" :style="{ left: `0px`, top: `0px` }"></div>
    </div>
    <!-- 小图列表 -->
    <ul class="small">
      <li v-for="(img, i) in imageList" :key="i" @mouseenter="enterhandler(i)" :class="{active:i ===activeIndex}">
        <img :src="img" alt="" />
      </li>
    </ul>
    <!-- 放大镜大图 -->
    <div class="large" :style="[
      {
        backgroundImage: `url(${imageList[0]})`,
        backgroundPositionX: `0px`,
        backgroundPositionY: `0px`,
      },
    ]" v-show="false"></div>
  </div>
</template>

<style scoped lang="scss">
.goods-image {
  width: 480px;
  height: 400px;
  position: relative;
  display: flex;

  .middle {
    width: 400px;
    height: 400px;
    background: #f5f5f5;
  }

  .large {
    position: absolute;
    top: 0;
    left: 412px;
    width: 400px;
    height: 400px;
    z-index: 500;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    // 背景图:盒子的大小 = 2:1  将来控制背景图的移动来实现放大的效果查看 background-position
    background-size: 800px 800px;
    background-color: #f8f8f8;
  }

  .layer {
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.2);
    // 绝对定位 然后跟随咱们鼠标控制left和top属性就可以让滑块移动起来
    left: 0;
    top: 0;
    position: absolute;
  }

  .small {
    width: 80px;

    li {
      width: 68px;
      height: 68px;
      margin-left: 12px;
      margin-bottom: 15px;
      cursor: pointer;

      &:hover,
      &.active {
        border: 2px solid $xtxColor;
      }
    }
  }
}
</style>

首先,需要准备好我们的图片预览区域的组件,

因为这个在其他很多地方都会用得到,所以单独把它独立创建一份组件。实现代码复用。

放在了compoents文件夹下面。隶属于项目的根组件(通用组件)。


如图,代码比较简单。不做过多的介绍了。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1945776.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Vue3】响应式数据

【Vue3】响应式数据 背景简介开发环境开发步骤及源码使用 ref 定义基本类型响应式数据使用 reactive 定义对象类型响应式数据使用 ref 定义对象类型响应式数据 ref 和 reactive 的对比使用原则建议 背景 随着年龄的增长&#xff0c;很多曾经烂熟于心的技术原理已被岁月摩擦得愈…

【C++初阶】string类

【C初阶】string类 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;C&#x1f96d; &#x1f33c;文章目录&#x1f33c; 1. 为什么学习string类&#xff1f; 1.1 C语言中的字符串 1.2 实际中 2. 标准库中的string类 2.1 string类 2.…

day07:用户下单、订单支付

文章目录 地址薄相关相关代码需求分析和设计代码书写 用户下单需求分析和设计代码开发 订单支付微信支付介绍微信支付准备工作如何保证数据安全&#xff1f;如何调用到商户系统 地址薄相关相关代码 需求分析和设计 产品原型接口设计数据库设计 代码书写 地址薄相关代码都是单…

【unity 新手教程 001/100】安装与窗口布局介绍

欢迎关注 、订阅专栏 【unity 新手教程】谢谢你的支持&#xff01;&#x1f49c;&#x1f49c; Unity下载与安装 &#x1f449;点击跳转详细图文步骤&#xff1a;Unity Hub Unity 编辑器 窗口布局&#xff1a; Hierarchy: 层级窗口 | 默认 Sample Scene (main camera、direc…

三星Unpacked发布会即将举行:有新款折叠屏手机,还有智能戒指

随着7月的脚步渐近&#xff0c;科技界的目光再次聚焦于三星&#xff0c;它即将在法国巴黎举办今年的第二场Unpacked发布会。这不仅是一场新品的展示&#xff0c;更是三星对创新科技的一次深刻诠释。 从Galaxy Z Fold 6的全新设计&#xff0c;到Galaxy Z Flip 6的显著升级&…

MySQL数据库练习(四)

1.建库建表 # 创建数据库 create database mydb15_indexstu;# use mydb15_indexstu;# 学生表student&#xff0c;定义主键&#xff0c;姓名不能重名&#xff0c;性别只能输入男或女&#xff0c;所在系的默认值是“计算机”&#xff0c;结构如下:student(Sno 学号&#xff0c;…

C#中的线性表

什么是线性表 线性表是最简单、最基本、最常用的数据结构。线性表是线性结构的抽象(Abstract),线性结构的特点是结构中的数据元素之间存在一对一的线性关系。这种一对一的关系指的是数据元素之间的位置关系,即:(1)除第一个位置的数据元素外,其它数据元素位置的前面都只有一个数…

基于python的京东VR眼镜口碑情感分析,包括lda和情感分析

第1章 绪论 1.1选题背景 在当今科技发展迅速的时代&#xff0c;虚拟现实&#xff08;VR&#xff09;技术作为一种前沿的数字体验方式受到越来越多人的关注。京东作为中国领先的电商平台&#xff0c;推出的VR眼镜备受消费者关注。通过对京东VR眼镜口碑进行情感分析&#xff0c…

2022 年中高职组“网络安全”赛项-海南省省竞赛任务书-1-B模块-B-4Web渗透测试

前言 本章节我将尝试操作B-4模块的渗透测试&#xff0c;搭建环境很难&#xff0c;还望大家点点赞多多支持&#xff01; 任务概览 最后4、5、6有一定的难度。 环境要求 kali Linux192.168.41.2Web服务器&#xff08;假设为PYsystem 2020 模拟平台&#xff09;192.168.41.7交换…

AGV平面坐标系变换公式及实例

1、AGV坐标系简介 如上图&#xff0c;小车前后对角是有激光雷达的&#xff0c;其坐标系称为激光坐标系&#xff0c;采用极坐标系体现。中间为车体坐标系&#xff0c;激光坐标系相对于车体坐标系关系不变&#xff1b;左下角是地图坐标系&#xff0c;小车扫图后&#xff0c;建立的…

PCIE的GT计算

在PCIe总线中&#xff0c;使用GT(Gigatransfer)计算PCIe链路的峰值带宽。GT是在PCIe链路上传递的峰值带宽&#xff0c;其计算公式为总线频率数据位宽2。

JMeter的使用方法及https的使用方法

软件安装&#xff1a; 参考链接&#xff1a;JMeter 下载安装及环境配置&#xff08;包含jdk1.8安装及配置&#xff09;_jmeter5.2.1需要什么版本的jdk-CSDN博客 前置知识储备&#xff1a; Https请求的案例: JMeter的第一个案例 增加线程数 线程&#xff08;thread&#xff…

视频行业(监控,直播,会议,视频通话)痛点,随时接入,异构融合,以OvMeet视频会议为中心解决企业视频应用完美解决方案

近年来随着网络的普及及音视频技术的不断发展&#xff0c;以全球化、网络化、智能化未趋势的办公方式越来越受到各行各业的青睐。视频会议解决方案的应用转往多种交互式视频应用&#xff0c;如转往视频接入融合&#xff0c;调度与管理、日常沟通、工作部署、紧急救援、作战指挥…

Vue3 SvgIcon组件开发

在前面自定义tree组件继续功能迭代前&#xff0c;我们先开发一个通用的ScgIcon组件&#xff0c;用于后续组件模板中小图标的展示。 引入iconfont 官网&#xff1a;https://www.iconfont.cn/ 选取图标进行下载&#xff0c;只取iconfont.js文件 在prettier中忽略该文件&#x…

NS4890C 2.4W 单声道AB类音频放大器

前言&#xff1a; 3W单声道关断模式音频功率放大器AD4150B NS4890C 国产小功放&#xff0c;性价比高&#xff0c;体积小MSOP8封装 参考价格0.2元 NS4890C 2.4W 单声道AB类音频放大器 1 产品特点 电压范围&#xff1a;3.0V-5.0V 输出功率&#xff1a;1.56WRL8Ω/THDN10% 关机…

基于Python的帕金森病人步态分析

目录 摘要一、引言1.背景知识2.实验目的和意义 二、实验方法1.实验环境2.实验步骤2.1 生成信号&#xff0c;进行手动傅里叶变换以及内置 FFT 函数傅里叶变换2.2 进行手动傅里叶变换以及内置 FFT 函数傅里叶变换2.3 基于傅里叶变换的步态信息分析2.4 基于傅里叶变换的卷积分析 3…

2024新版 黑马程序员《C++零基础入门》笔记——入门09 cout打印输出

1.cout打印输出 2.代码练习 #include "iostream" using namespace std;int main() {cout << "I love Libby!" << endl;cout << 10 << endl;cout << "I am 10" << "years old." << endl;re…

Marin说PCB之1000-BASE-T1上的共模电感的选型知多少?

单板上的电子原件的物料的升级和替代想必对我们做这些做硬件的同志们并不陌生吧&#xff0c;之前遇到最多情况的就是一些主芯片上的电容可能由于电源完整性得原因需要替换成一个性能好一些物料&#xff0c;这个是比较常见的操作&#xff0c;一般做法都是仿真的同事自己把两颗电…

初试Ollama本地大模型

准备工作 机器配置&#xff1a; CPUi5-10400内存16GB硬盘SSD 480GB显卡GTX 1660 系统&#xff1a;Ubuntu 18.04 Server NVIDIA驱动安装 - 下载 驱动下载地址&#xff1a;https://www.nvidia.cn/geforce/drivers/ - 获取下载链接 GTX 1660驱动下载链接&#xff1a;https://…

Django执行ORM时打印SQL语句

settings中添加LOGGING相关日志配置 LOGGING {version: 1,disable_existing_loggers: False,handlers: {console:{level:DEBUG,class:logging.StreamHandler,},},loggers: {django.db.backends: {handlers: [console],propagate: True,level:DEBUG,},}}批量查询DEMO&#xf…