Vue3 实现产品图片放大器

这篇具有很好参考价值的文章主要介绍了Vue3 实现产品图片放大器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue3 实现类似淘宝、京东产品详情图片放大器功能
环境:vue3+ts+vite

1.创建picShow.vue组件

<script lang="ts" setup>
import {ref, computed} from 'vue'
import {useMouseInElement} from '@vueuse/core'

/*获取父组件的传值*/
defineProps<{
    images: string[]
}>()
// 当前显示的图片索引
let active = ref(0)
// ref 获取 DOM 元素的位置
const target = ref(null)
// isisOutside为 true 的时候代表鼠标未进入目标元素,为 false 时代表鼠标进入目标元素
const {elementX, elementY, isOutside} = useMouseInElement(target)
// 遮罩半透明图在商品大图中的坐标位置
const position = computed(() => {
    let x = elementX.value - 70
    let y = elementY.value - 70
    if (x <= 0) x = 0
    if (x >= 140) x = 140
    if (y <= 0) y = 0
    if (y >= 140) y = 140
    return {x, y}
})
</script>
<template>
    <div class="product-image">
        <!-- 放大 -->
        <div class="large" :style="[{ backgroundImage: `url(${images[active]})`,
          backgroundPosition: `-${position.x * 2}px -${position.y * 2}px`
        }]" v-show="!isOutside"></div>
        <div ref="target" class="middle">
            <img :src="images[active]" alt=""/>
            <!-- 遮罩层 -->
            <div class="layer" v-show="!isOutside" :style="{ left: `${position.x}px`, top: `${position.y}px` }"></div>
        </div>
        <ul class="small">
            <li v-for="(item, index) in images" :key="item"
                    :class="{ active: index === active }"
                    @mouseenter="active = index">
                <img :src="item" alt=""/>
            </li>
        </ul>
    </div>
</template>

<style lang="scss" scoped>
.product-image {
  position: relative;
  z-index: 500;
  .large {
    position: absolute;
    top: 0;
    left: 290px;
    width: 500px;
    height: 500px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    background-size: 156% 156%;
    background-color: #f8f8f8;
  }
  .middle {
    width: 280px;
    height: 280px;
    background: #f5f5f5;
    position: relative;
    cursor: move;
    .layer {
      width: 140px;
      height: 140px;
      background: rgba(0, 0, 0, 0.2);
      left: 0;
      top: 0;
      position: absolute;
    }
    img{
      width: 280px;
      height: 280px;
    }
  }
  .small {
    width: 280px;
    display: flex;
    margin-top: 5px;
    li {
      width: 70px;
      height: 70px;
      cursor: pointer;
      list-style: none;
      img{
        width: 70px;
        height: 70px;
      }
    }
  }
}
</style>

2.在其他页面引用组件picShow.vue

<div class="product-info">
   <div class="media">
        <PicShow :images="picList"/>
    </div>
</div>

//js部分
import PicShow from "@/components/picShow.vue";
const picList=[
    '/src/assets/images/contactus01.jpg',
    '/src/assets/images/contactus02.jpg',
    '/src/assets/images/contactus03.jpg',
    '/src/assets/images/contactus04.jpg',
]

效果:
Vue3 实现产品图片放大器,Vue3,前端,vue3,图片放大文章来源地址https://www.toymoban.com/news/detail-632214.html

到了这里,关于Vue3 实现产品图片放大器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小米wifi信号放大器怎么样?小米wifi放大器好用吗

    小米wIfI信号放大器一发布就以39元的售价吸引了很多米粉,那这款小米WIFI放大器到底怎么样好用吗?那么小米wifi信号放大器怎么样?小米wifi放大器好用吗?先一起来看看吧! 这款小米wifi放大器可以配合小米路由器使用,顾名思义是一款增强路由器信号覆盖面积的工具。 小米

    2024年02月08日
    浏览(50)
  • 小米WiFi放大器好用吗?小米wifi热点放大器0元公测地址

    wifi信号不强怎么办,试试近日小米发布的wifi放大器吧,小米WiFi放大器好用吗?今天开放0元公测,入手一台你就知道好不好用了。 小米WiFi放大器好用吗 小米wifi热点放大器0元公测地址 今天早上10点,小米wifi热点放大器终于登场。 万万没想到的是,小米给出的答案居然跟此

    2024年02月08日
    浏览(49)
  • 39元小米WiFi放大器什么时候上市值得买吗?小米WiFi放大器测评

    在6月10日的新品沟通会上,小米除了小米新一代小米路由器之外,还推出了一款配件产品:小米Wi-Fi放大器。 和传统的Wi-Fi放大器功能类似, 小米Wi-Fi放大器同样可以看做是一个具备中继功能的小型无线路由器 。不同的是,小米把它做的更“智能”了一些,同时使用标准USB接

    2024年02月08日
    浏览(48)
  • 小米Wi-Fi放大器多少钱?小米Wi-Fi放大器是什么?

    小米昨天又发布了一款智能新品——小米Wi-Fi放大器。小编下面为大家介绍一下小米Wi-Fi放大器以及价格是否亲民。 小米Wi-Fi放大器是什么? 顾名思义,小米Wi-Fi放大器就是一个 wifi信号增强器 ,这个不同于系统软件的增强器,而是一款智能硬件。可配合小米路由器使用,适合

    2024年02月08日
    浏览(62)
  • 可调增益放大器

    在multsim软件环境下,设计一个数字控制增益放大器。在控制键的作用下,放大器的增益能够依次在1至8之间转换,并用LED数码管显示放大器的增益。 二.设计目的 通过本实验,熟悉运算放大器、计数器、模拟开关、加法器、译码显示电路的用法。 三、工作原理 同相输入比例

    2023年04月27日
    浏览(42)
  • 网络放大器

    问题描述 对于一个石油传送网络可由一个加权有向无环图G表示。该图中有一个称为源点的顶点S ( 保证S的入度为0 ) , 从S出发 , 石油流向图中的其他顶点 . G中每条边上的权重为它所连接的两点间的距离。 在输送石油的过程中 , 需要有一定的压力才能使石油从一个点到达另一个

    2024年02月06日
    浏览(44)
  • 直流对数放大器

     Logarithmic Amplifiers 对数放大器的应用场合         在雷达和一些其他测距的场合,sensor输出的信号的动态范围比较宽,也就是要求sensor输出的弱信号时有比较大的放大倍数,强的信号有较小的放大倍数,以保证sensor输出的信号经过放大器后信号的动态范围不超过ADC的输入要

    2024年02月09日
    浏览(39)
  • 零基础学模拟电路--3.同相放大器、反相放大器、加法器、减法器、积分器、微分器

    基于上一节所讲的虚短和虚断,我们可以搭建出这些电路: ​ 同相放大器,反相放大器,加法器,减法器,积分器,微分器,电压跟随器。 接下来,我会运用虚断和虚断推导几个典型的电路。 其余的电路,希望大家能自己推导一遍 关于微分器和积分器,这里还得补充一个

    2024年02月07日
    浏览(51)
  • 飞链云版图-像素放大器

    在之前的【文字生成图片】,【图片生成图片】中,大家会发现,生成的像素不是很高清,在这里,教大家一个将图片无损放大的方式; 访问链接:https://ai.feilianyun.cn/ 点击【Extras】菜单栏 选择好【修改比例】,我在这里放大到了4倍; 然后还有放大器,其实选择一个就可以

    2024年02月11日
    浏览(52)
  • 电子技术——共栅(共基)放大器

    在本节我们学习IC中共栅(共基)放大器的配置,虽然我们之前在分立电路中学习过共栅(共基)放大器的配置。但是在IC中共栅(共基)放大器主要作为电流缓冲器来使用,这正是本节要学习的内容。 下图是CG放大器的原理图,输入信号源 $v_{sig} 带有内阻 R s R_s R s ​ : 负

    2024年02月09日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包