vue实现放大镜

最新推荐文章于 2024-08-06 17:41:12 发布
最新推荐文章于 2024-08-06 17:41:12 发布
阅读量3.7k 收藏 2
点赞数 1
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44343449/article/details/94431595
版权 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{
      margin:0;
    }
    .img{

      width:300px;height:300px;
      border: 1px solid #ddd;
      position: relative;
    }
    #mask{
      width:150px;height:150px;
      background: lightyellow;
      position:absolute;
    }
    .hide{
      display:none;
    }
    .superMask{
      width:300px;
      height:300px;
      position:absolute;
      left:0;
      top:0;
    }
  </style>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
  <div class="img">
    <div id="mask"
         :style="styleObj" :class="mask_hide">

    </div>
  </div>
  <div class="superMask"  @mousemove="move($event)" @mouseover="display(true)"
       @mouseout="display(false)"></div>
</div>
</body>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      mask_hide:{
        "hide":true
      },
      styleObj:{
        top:0,
        left:0,
      }
    },

    methods:{

      move(e){
        this.styleObj.top=e.offsetY-75+"px";
        this.styleObj.left=e.offsetX-75+"px";


      },
      display(bool){
        this.mask_hide.hide=!bool
      },
    }
  });
</script>
</html>
weixin_44343449
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现商品放大镜效果
老司机的后备箱
10-30 775
一般电商类网页，如淘宝、京东，都会有商品主图实现放大镜效果的场景，今天来简单实现一个类似的放大镜功能整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
Vue实现放大镜，但是放大图片跟着鼠标移动
dw将限制条件全部检测通过后才能提交表单
03-14 540
【代码】Vue实现放大镜，但是放大图片跟着鼠标移动。
vue实现放大镜效果
10-14
主要为大家详细介绍了vue实现放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue图片放大镜效果
weixin_34217711的博客
11-28 912
原作者地址：https://github.com/lemontree2000/vue-magnify 经测试，原插件在使用时有bug,即在预览时进行鼠标滚动，导致遮罩层计算错误。我已修复该bug,特分享出来。 组件核心代码： &lt;template&gt; &lt;div class="magnify"&gt; &lt;div class="preview-box" @mousemo...
vue项目图片预览组件
最新发布
m0_64649329的博客
08-06 1536
vue项目图片预览组件——小图切换大图&放大镜功能的实现
Vue中实现放大镜效果
hmxs_hmbb的博客
10-16 5552
Vue中实现放大镜效果
vue放大镜
LarrySun
11-23 980
最近有一个需求是要像淘宝商品详情页那样，分享一下。小白第一次分享，各位大神莫见笑。 Build Setup 使用步骤 # 安装 install npm install vue-piczoom --save # 使用 use import PicZoom from 'vue-piczoom' export default { components: { PicZoom } ...
vue3+vite+ts 仿淘宝放大镜效果
09-17
通常会使用CSS3的transform属性实现放大效果，并且可能需要创建一个浮动的放大镜元素来展示放大后的图像。 6. **项目配置**：`.gitignore` 文件定义了版本控制中忽略的文件和目录；`tsconfig.json` 和 `tsconfig....
Vue实现放大镜
weixin_45389051的博客
03-06 1495
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>放大镜</title> <link rel="stylesheet" href="magnifier.css"> <script src="http...
Vue实现放大镜效果
m0_55557411的博客
03-26 983
vue实现放大镜效果
基于vue-zoom-on-hover 的放大镜功能
08-23
vue-zoom-on-hover 不能通过npm 安装，所以自己把代码拿出来组成组件，这样就可以用了！！！
基于Vue的商品主图放大镜方案详解
12-13
前言 在做电商类应用时，难免会遇到商品主图实现放大镜效果的场景，现有的基于 Vue 的第三方包不多并且无法直接复用，今天，我来分享一种高稳定性的基于 Vue 的图片放大镜方法。 实现原理 放大镜的原理用一句话概括，就是根据小图上的鼠标位置去定位大图。 图1 原理图（以2倍放大为例） 相信原理图已经画的很明白了， 图中，左侧框是小图框，其蓝色区域为图片遮罩层（需放大区域），右侧框是整个大图目前所在区域，其蓝色区域是放大区域，设置超出隐藏，就实现了放大遮罩区域的效果。 显然，两块蓝色区域存在着某种对应关系，即遮罩的左上角位置（相对于小图，以下称 X 坐标）和放大区域（相对于大图）的左上角位置是成
vue中如何实现图片放大镜功能
qq_37130872的博客
09-09 1082
vue中图片放大镜功能 1、在vue项目中不可避免的会做一个图片放大镜的弄能（例如、商城、店铺等），今天同事问了这个功能恰好以前写过，因此记录一下。 2、废话不多说直接上代码： 父组件中： <template> <div> <imgZoom class="imgZoom" v-if="imgpic" :url="imgpic" :highUrl="imgpic"></imgZoom> </div> </templa
Vue实现图片放大镜效果
jie6666的博客
12-13 5282
一、需求描述： 在使用Vue进行项目开发时，需要把产品的照片进行放大展示。方法图片随鼠标在一定范围内，移动而放大。 二、需求分析： 例如：Handler 发送消息有两种方式，分别是 Handler.obtainMessage()和 Handler.sendMessage()，其中 obtainMessage 方式当数据量过大时，由于 MessageQuene 大小也有限，所以当 message 处理不及时时，会造成先传的数据被覆盖，进而导致数据丢失。 三、解决方案： <template
vue实现调动本地放大镜，实现放大镜效果（不只限于图片放大）
fffffffzl的博客
11-17 231
vue实现调动本地放大镜，实现放大镜效果（不只限于图片放大） 但需要修改注册表，具有一定限制，且只适用Windows系统。 <a href="Webshell:1123">放大镜</a> 建一个TXT文件，复制下面东西，保存文件，修改后缀为.reg Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Webshell] @="URL:Webshell Protocol Handler" "URL Protocol"=""
vue写出放大镜的效果
weixin_33873846的博客
01-05 314
用vue写出放大镜查看图片的效果。 安装 npm install vue2.0-zoom 引入 import imgZoom from 'vue2.0-zoom' 组件 components: { imgZoom } 标签 <img-zoom src="img-samll.jpg" width="450" height="250" bigsrc="...
vue中实现放大镜 (直接c就能用)
weixin_73219516的博客
07-05 234
img :style="r_img" class="rightImg" src="../../../../../2023正班半课件/image/10.jpg" alt=""><img class="leftImg" src="../../../../../2023正班半课件/image/10.jpg" alt="">/* 放大的图片，通过定位将左上角定位到(0,0) *//* 层罩，通过定位将左上角定位到(0,0) *//* 右边的区域图片放大空间 *//* 原图的显示 *//* 原图的容器 */
vue2放大镜功能实现
08-10
要实现Vue 2的放大镜功能，你可以按照以下步骤进行操作： 1. 首先，确保你已经在项目中引入了Vue 2。 2. 在需要使用放大镜功能的组件中，定义一个data属性用于存储放大镜的状态，例如： ```javascript data() { return { zoomed: false, // 放大镜状态，默认为false mouseX: 0, // 鼠标X轴坐标 mouseY: 0, // 鼠标Y轴坐标 zoomX: 0, // 放大镜X轴坐标 zoomY: 0, // 放大镜Y轴坐标 } }, ``` 3. 在模板中，使用`v-on`指令监听鼠标移动事件，并更新鼠标坐标： ```html <template> <div @mousemove="updateMousePosition"> <!-- 图片展示区域 --> <div class="image-container"> <img src="path/to/image.jpg" alt="Image"> </div> <!-- 放大镜区域 --> <div v-if="zoomed" class="zoom-container" :style="{ left: zoomX + 'px', top: zoomY + 'px' }"> <img src="path/to/image.jpg" alt="Zoomed Image"> </div> </div> </template> ``` 4. 在方法中，实现更新鼠标坐标和放大镜位置的逻辑： ```javascript methods: { updateMousePosition(event) { this.mouseX = event.clientX; this.mouseY = event.clientY; this.updateZoomPosition(); }, updateZoomPosition() { const container = document.querySelector('.image-container'); const zoomContainer = document.querySelector('.zoom-container'); if (container && zoomContainer) { const containerRect = container.getBoundingClientRect(); const zoomContainerRect = zoomContainer.getBoundingClientRect(); // 根据鼠标坐标和图片容器位置计算放大镜位置 this.zoomX = this.mouseX - containerRect.left - zoomContainerRect.width / 2; this.zoomY = this.mouseY - containerRect.top - zoomContainerRect.height / 2; // 限制放大镜位置在图片容器内部 this.zoomX = Math.max(0, Math.min(this.zoomX, containerRect.width - zoomContainerRect.width)); this.zoomY = Math.max(0, Math.min(this.zoomY, containerRect.height - zoomContainerRect.height)); } } } ``` 5. 最后，添加一些CSS样式来定义图片容器和放大镜的样式： ```css .image-container { position: relative; } .zoom-container { position: absolute; width: 200px; /* 自定义放大镜的宽度 */ height: 200px; /* 自定义放大镜的高度 */ border: 1px solid #ccc; pointer-events: none; /* 防止放大镜影响鼠标事件 */ } ``` 这样，你就可以在Vue 2中实现一个简单的放大镜功能了。当鼠标在图片上移动时，会显示一个放大的镜头，跟随鼠标移动并显示放大的图像。根据需要，你可以自定义放大镜的样式和放大倍数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值