Vue实现放大镜，但是放大图片跟着鼠标移动

最新推荐文章于 2024-05-20 17:02:17 发布

VIP文章 ZQ...

最新推荐文章于 2024-05-20 17:02:17 发布

阅读量502

点赞数

分类专栏：前端学习文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_53071920/article/details/129541204

版权

Vue实现放大镜，但是放大图片跟着鼠标移动

在这里插入图片描述

问题出现在：ref="big"放错位置，应该放在ing中

<template>
  <div class="spec-preview">
    <img :src= imgObj.imgUrl />
    <div class="event" @mousemove="handler"></div>
    <div class="big"  ref="big">
      <img :src= imgObj.imgUrl />
    </div>
    <div

最低0.47元/天解锁文章

优惠劵

ZQ...

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue实现放大镜，但是放大图片跟着鼠标移动

【代码】Vue实现放大镜，但是放大图片跟着鼠标移动。
复制链接

扫一扫

专栏目录

基于vue的鼠标移动放大部分区域图片（仿京东商品图片放大效果）

weixin_41308436的博客

03-18

4533

基于vue的鼠标移动放大部分区域图片（仿京东商品图片放大效果）

vue实现放大镜效果

10-14

主要为大家详细介绍了vue实现放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

参与评论您还未登录，请先登录后发表或查看评论

vue鼠标移入该盒子放大，循环实现

qq_39232387的博客

02-23

1602

效果如图，鼠标移入某个盒子，该盒子实现放大效果。获取用ref，放大效果transform:scale()，放大速度transition <div class="home"> <router-link :to="item.url" v-for="(item, i) in list" :key="i"> <div class="box" ref="aaa" @mousemove="i

(vue)vue鼠标移入element卡片出现放大动效

nyf_unknow的博客

05-30

699

【代码】(vue)vue鼠标移入element卡片出现放大动效。

基于VUE3的任意缩放与拖拽组件

写好每一行代码

12-07

596

一个基于vue3开发的轻量、高效缩放拖拽组件，方便开发者快速实现缩放拖拽功能。

Vue鼠标移动跟随特效（开箱即用）

小阮的笔记本

11-11

4876

效果图直接在需要的页面引用该组件就行 <template> <div id="panel"> </div> </template> <script> export default { methods: { mouseMove(e) { /*这里获取元素节点*/ let oPanel = document.getElementById("panel");

【JavaScript】vue指令实现根据鼠标位置放大缩小功能

nuanYangC的博客

04-15

1855

通过vue自定义指令实现根据鼠标位置放大缩小

vue表格渲染图片,鼠标移入图片放大，并将表格导出为PDF

m0_46577631的博客

05-31

396

##vue表格渲染图片,鼠标移入图片放大，并将表格导出为PDF。

Vue 点击图片放大显示功能

代码小疯子

03-29

2078

首先是自定义大图显示的通用组件：big-img.vue< template > < div v-show = " visible " @click = " closeClick " class = " showPhoto " > < img class = " img " :src = " url " alt = " 图片加载失败 " /> </ div > </ template > < script > export default {props : {url : {

vue实现点击图片放大效果

08-29

主要为大家详细介绍了vue实现点击图片放大效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

基于vue2.x的电商图片放大镜插件的使用

08-28

本篇文章主要介绍了基于vue2.x的电商图片放大镜插件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

vue3+vite+ts 仿淘宝放大镜效果

09-17

1.本demo是一个类似于淘宝放大镜的效果。 2.使用vue3+vite搭建 3.实现了图片点击轮播和移入放大的效果 4.下载下来可直接使用，必须真实有问题可以直接提问

一个手写的vue放大镜效果

10-16

主要介绍了一个手写的vue放大镜，组件使用less，文中给出了示例代码,需要的朋友可以参考下

vue项目中实现标签元素的拖动，缩放，旋转等操作

不怕麻烦的鹿丸的博客

07-12

2850

mousedownmouseupmousemovemouseleave用户在同一个位置先完成mousedown动作，再完成mouseup动作。因此，触发顺序是，mousedown首先触发，mouseup接着触发，click最后触发。会在mousedown、mouseup、click之后触发。都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。都是鼠标进入一个节点时触发。

vue3 div实现鼠标拖拽放大缩小

前端小白成长记

02-21

2152

vue3 div实现鼠标拖拽放大缩小

Vue3---放大镜的实现

weixin_52053631的博客

07-09

703

横向：elementX > 300 left = 200 elementX < 100 left = 0。纵向：elementY > 300 top = 200 elementY < 100 top = 0。思路：鼠标移入盒子（isOutside），滑块和大图才显示（v-show）思路：大图的移动方向和滑块移动方向相反，且数值为2倍。2. 放大镜效果实现------滑块跟随鼠标移动。4. 放大镜效果实现 - 鼠标移入控制显隐。制滑块跟随鼠标移动（left/top）3. 放大镜效果实现 - 大图效果实现。

vue中跟随鼠标移动和边界处理

m0_56895352的博客

03-14

1699

其中mousedown应该绑定被拖拽的元素，而mouseup就所谓了，mousemove一般通过document或者window进行监听，当然也可以是父容器。最后的问题是下边界无需处理，由于元素已经脱离了标准流，会导致父元素高度塌陷，为了能够显示父元素高度以此来添加背景颜色，这里需要用给父容器实时获取最新高度。这里的做法时容器高度如果小于屏幕内在高度就会等于屏幕内在高度就解决问题了。容器就会不断变大，向上拖拽时容器该需要变小，

vite+ts+mock+vue-router+pinia实现vue的路由权限

最新发布

beekim的博客

05-20

303

vite.config.ts配置。

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中实现一个简单的放大镜功能了。当鼠标在图片上移动时，会显示一个放大的镜头，跟随鼠标移动并显示放大的图像。根据需要，你可以自定义放大镜的样式和放大倍数。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交