vue3 自定义图片放大器效果的示例代码

效果

具体代码实现

创建商品图片展示的vue页面:ProductPicShow.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 - 100
  let y = elementY.value - 100
  if (x <= 0) x = 0
  if (x >= 200) x = 200
  if (y <= 0) y = 0
  if (y >= 200) y = 200
  return { x, y }
})
</script>
<template>
  <div class="product-image">
    <!-- 放大镜的大盒子 -->
    <div
        class="large"
        :style="[
        {
          backgroundImage: `url(${images[active]})`,
          backgroundPosition: `-${position.x * 3}px -${position.y * 3}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 scoped lang="less">
.product-image {
  width: 480px;
  height: 400px;
  position: relative;
  display: flex;
  z-index: 500;
  .large {
    position: absolute;
    top: 0;
    left: 412px;
    width: 600px;
    height: 600px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    background-size: 200% 200%;
    background-color: #f8f8f8;
  }
  .middle {
    width: 400px;
    height: 400px;
    background: #f5f5f5;
    position: relative;
    cursor: move;
    .layer {
      width: 200px;
      height: 200px;
      background: rgba(0, 0, 0, 0.2);
      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 #27BA9B;
      }
    }
  }
}
</style>

使用:Product.vue

<template>
  <div class="product-info">
    <div class="media">
      <ProductPicShow :images="slidePics"/>
    </div>
  </div>
</template>
<script setup lang="ts">
import ProductPicShow from "@/views/product/components/ProductPicShow.vue"
</script>
<style scoped lang="less">
.product-info {
  min-height: 600px;
  background: #fff;
  display: flex;

  .media {
    width: 580px;
    height: 600px;
    padding: 30px 50px;
  }
}
</style>

到此这篇关于vue3 自定义图片放大器的文章就介绍到这了,更多相关vue3 图片放大器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue3实现旋转图片验证

    本文实例为大家分享了vue3实现旋转图片验证的具体代码,供大家参考,具体内容如下 一.前言 一个突发奇想的创作. 二.代码 <template>   <el-dialog       v-model="dialogVisible"       width="15%"       :before-close="handleClose">     <el-image :src="imageUrl" :

  • 利用Vue3和element-plus实现图片上传组件

    目录 前言 具体代码 图片上传 上传组件 前言 element-plus 提供了 uploader 组件,但是不好定制化,所以自己又造了个轮子,实现了一个图片上传的组件,它的预期行为是: 1.还没上传图片时,显示上传卡片 2.上传图片时显示进度条,隐藏上传卡片 3.上传成功时显示图片缩略图,上传失败则显示失败提示 4.支持上传图片的预览和删除 具体如下图所示: 具体代码 图片上传 这里使用的图床是牛图网,无需注册,貌似也没有图片大小的限制,但是请不要上传违规图像. <code>import a

  • vue3+typescript实现图片懒加载插件

    github项目地址: github.com/murongg/vue- 求star 与 issues 我文采不好,可能写的文章不咋样,有什么问题可以在留言区评论,我会尽力解答 本项目已经发布到npm 安装: $ npm i vue3-lazyload # or $ yarn add vue3-lazyload 需求分析 支持自定义 loading 图片,图片加载状态时使用此图片 支持自定义 error 图片,图片加载失败后使用此图片 支持 lifecycle hooks,类似于 vue 的生命周

  • Vue3实现图片放大镜效果

    本文实例为大家分享了Vue3实现图片放大镜效果的具体代码,供大家参考,具体内容如下 实现效果 代码 <template> <div class="goods-image"> <!-- 大图容器 --> <div class="large" :style="[ { backgroundImage: `url(${imageList[curId]})`, backgroundPositionX: position.ba

  • vue3如何将html元素变成canvas(海报生成),进行图片保存/截图

    目录 将html元素变成canvas(海报生成),进行图片保存/截图 使用html2canvas将页面转化为图片 将html元素变成canvas(海报生成),进行图片保存/截图 // 网页上只有一张图片 我们可以直接就进行图片保存 // 但是你想 保存这张图片的时候 顺便把下面的字也带上 相当于截图 那请你像我这样做 <div id="capture" style="padding: 10px; background: #fff"> <img :s

  • 基于Vue3实现的图片散落效果实例

    目录 背景 做啥好呢 出现问题 原理 HTML结构 准备5张图片 创建div 切换背景图片 div存在间隙的问题 代码详情 总结 背景 今天又是美好的摸鱼一天,刚刚进入职场,觉得一切都很新鲜,导师给的任务也不多(要是每天都是这样就好了),于是开始带薪学习. 做啥好呢 没事在网上乱逛的时候,偶然间看到一个动画效果不错,就决定上手做一些,简单的说就是一个完整的图片,在一段时间之后回突然破裂开来,觉得很有意思,就新建了一个文件夹. 出现问题 一下午的摸鱼时光,间公司熙熙攘攘,我在其中却格格不入(太闲了

  • vue3 自定义图片放大器效果的示例代码

    效果 具体代码实现 创建商品图片展示的vue页面:ProductPicShow.vue <script lang="ts" setup> import { ref, computed } from 'vue' import { useMouseInElement } from '@vueuse/core' defineProps<{ images: string[] }>() // 当前显示的图片索引 let active = ref(0) // ref 获取

  • Android 自定义加载动画Dialog弹窗效果的示例代码

    效果图 首先是创建弹窗的背景 这是上面用到的 以shape_bg_5_blue.xml为例,其他的三个无非就是里面的颜色不一样而已 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="5dp"

  • vue3实现淘宝放大镜效果的示例代码

    目录 实现效果 实现思路 完成小图盒子.遮罩.大图盒子布局 实现鼠标移动到小图盒子显示遮罩和大图盒子 实现鼠标移动遮罩在小图盒子移动 完整代码 总结 实现效果 实现思路 我们实现动图的淘宝放大镜的效果需要4步. 1.完成小图盒子.遮罩.大图盒子布局2.实现鼠标移动到小图盒子显示遮罩和大图盒子3.实现鼠标移动遮罩在小图盒子移动4.实现遮罩的移动范围不能超出小图盒子,且移动时带动大图图片移动 完成小图盒子.遮罩.大图盒子布局 我的布局小图盒子包裹图片.遮罩.大图盒子.小图盒子为相对定位.遮罩.大图盒

  • JS相册图片抖动放大展示效果的示例代码

    上篇文章给大家介绍了JS实现简单抖动效果,感兴趣的朋友点击查看. 今天给大家分享JS相册图片抖动放大展示效果,效果图如下所示: var xm; var ym; /* ==== onmousemove event ==== */ document.onmousemove = function(e){ if(window.event) e=window.event; xm = (e.x || e.clientX); ym = (e.y || e.clientY); } /* ==== window

  • Android 给图片加上水印的示例代码(支持logo+文字)

    本文介绍了Android 给图片加上水印的示例代码(支持logo+文字),分享给大家,具体如下: 现在我们想要往图片上打上水印,该水印应符合这样的需求的: 支持logo+文字: 文字信息支持多行展示: 用户可以选择水印在图片上的生成位置(左上.右上.右下和左下). 粗略的结构图低配版大概就长这样... 水印结构图.png 现在提供这样的一种思路去实现这一个需求,我们可以通过自定义一个view,view的布局中包含logo.公司名称和相关信息,这个view就是我们要打上图片的水印. 这样的一个vi

  • vue不操作dom实现图片轮播的示例代码

    本文介绍了vue不操作dom实现图片轮播的示例代码,分享给大家,具体如下: 效果 宽度为1190px且水平居中的轮播盒子: 中间是当前显示的默认尺寸图片: 左右两边是预显示的小尺寸图片: 轮播从右至左,图片逐渐放大. 做普通平滑轮播也可以参照这个思路 html <ul> <li v-for="(demo,index) in demoList" :key="index" :class="{'demo-left':demoStyle(inde

  • 使用Vue3实现一个Upload组件的示例代码

    通用上传组件开发 开发上传组件前我们需要了解: FormData上传文件所需API dragOver文件拖拽到区域时触发 dragLeave文件离开拖动区域 drop文件移动到有效目标时 首先实现一个最基本的上传流程: 基本上传流程,点击按钮选择,完成上传 代码如下: <template> <div class="app-container"> <!--使用change事件--> <input type="file" @ch

  • 基于Vue3实现数字华容道游戏的示例代码

    目录 前言 环境 思路 实现 GameCnt GameTool GamePass GameTip Menu 最后 前言 恰逢春之四月,天气忽热忽凉,遇游戏大赛,以笨拙之技,书一篇小文. 游戏规则:存在n*n的格子,需要将它们按数字顺序或图片顺序一一还原即可. 环境 主要环境: vue3 version:3.2.4 vite version:2.5.0 vue-router version:4.0.14 注:这个游戏的路由使用的是自动路由插件 主要插件: windicss version:3.5.

  • jQuery自定义图片上传插件实例代码

    摘要 1.jquery自定义插件方法 2.表单file样式调整 3.利用formData,ajax上传图片 4.js,css弹出层 5.springmvc上传图片 效果 调用方式 $("#picUrl").imgUpload({}),在代码内部为调用对象绑定了click事件,点击弹出上传界面. $(function(){ $("#picUrl").imgUpload({url:'<%=basePath%>'+'file/upload.do'}) $(&q

随机推荐