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


Posted in Vue.js onJuly 23, 2022

效果

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 图片放大器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
Vue实现小购物车功能
Dec 21 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
vue递归实现树形组件
Jul 15 #Vue.js
VUE递归树形实现多级列表
Jul 15 #Vue.js
Vue2项目中对百度地图的封装使用详解
vue如何在data中引入图片的正确路径
Jun 05 #Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 #Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 #Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 #Vue.js
You might like
德劲1103的维修打理经验
2021/03/02 无线电
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
Python的一些用法分享
2012/10/07 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
机关党员公开承诺书
2014/08/30 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
清明节寄语2015
2015/03/23 职场文书
宾馆客房管理制度
2015/08/06 职场文书
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python