vue实现放大镜效果


Posted in Javascript onSeptember 17, 2020

本文实例为大家分享了vue实现放大镜效果的具体代码,供大家参考,具体内容如下

实现类淘宝放大镜效果

前端小白一枚,最近在进行 vue 方面的学习,逛淘宝闲来无事想试试做个放大镜,结果虽然做出来了,但其中有一些问题让我无法解决,四处搜索也没有找到满意的答案,很是心烦,希望能有大佬帮忙解答,谢谢

步骤思路

  • 对原图的显示空间(left) 可以将显示原图的 img 换成 canvas,来对图片进行保护
  • 跟随鼠标移动时显示放大的指示区(鼠标层罩top)
  • 显示层罩区域选中放大的显示空间(right)

HTML部分

<template>
 <div>
  <div class="left">
   <img class="leftImg" src="../../public/image/test.jpg" alt="">
   <!-- 鼠标层罩 -->
   <div v-show="topShow" class="top" :style="topStyle"></div>
   <!-- 最顶层覆盖了整个原图空间的透明层罩 -->
   <div class="maskTop"
   @mouseenter="enterHandler"
   @mousemove="moveHandler"
   @mouseout="outHandler"></div>
  </div>
  <div v-show="rShow" class="right">
   <img :style="r_img" class="rightImg" src="../../public/image/test.jpg" alt="">
  </div>
 </div>
</template>

CSS部分

<style scoped>
/* 放大的图片,通过定位将左上角定位到(0,0) */
.rightImg {
 display: inline-block;
 width: 800px;
 height: 800px;
 position: absolute;
 top: 0;
 left: 0;
}
/* 右边的区域图片放大空间 */
.right {
 margin-left: 412px;
 width: 400px;
 height: 400px;
 border: 1px solid red;
 position: relative;
 overflow: hidden;
}
/* 一个最高层层罩 */
.maskTop {
 width: 400px;
 height: 400px;
 position: absolute;
 z-index: 1;
 top: 0;
 left: 0;
}
/* 层罩,通过定位将左上角定位到(0,0) */
.top {
 width: 200px;
 height: 200px;
 background-color: lightcoral;
 opacity: 0.4;
 position: absolute;
 top: 0;
 left: 0;
}
/* 原图的显示 */
.leftImg {
 width: 400px;
 height: 400px;
 display: inline-block;
}
/* 原图的容器 */
.left {
 width: 400px;
 height: 400px;
 border: 1px solid teal;
 float: left;
 position: relative;
}
</style>

JS实现部分

<script>
export default {
 data() {
  return {
   topStyle:{transform:''},
   r_img: {},
   topShow:false,
   rShow:false
  }
 },
 methods : {
  // 鼠标进入原图空间函数
  enterHandler() {
   // 层罩及放大空间的显示
   this.topShow = true
   this.rShow = true
  },
  // 鼠标移动函数
  moveHandler(event) {
   // 鼠标的坐标位置
   let x = event.offsetX
   let y = event.offsetY
   // 层罩的左上角坐标位置,并对其进行限制:无法超出原图区域左上角
   let topX = (x-100) < 0 ? 0:(x-100)
   let topY = (y-100) < 0 ? 0:(y-100)
   // 对层罩位置再一次限制,保证层罩只能在原图区域空间内
   if(topX>200) {
    topX = 200
   }
   if(topY>200) {
    topY = 200
   }
   // 通过 transform 进行移动控制
   this.topStyle.transform = `translate(${topX}px,${topY}px)`
   this.r_img.transform = `translate(-${2*topX}px,-${2*topY}px)`
  },
  // 鼠标移出函数
  outHandler() {
   // 控制层罩与放大空间的隐藏
   this.topShow = false
   this.rShow = false
  }
 }
}
</script>

问题

原本我是将三个鼠标事件添加在原图容器 left 上的,结果不断出现问题
1、在我加了一个覆盖了鼠标区域的透明层罩 maskTop 才让这个放大镜能完整的实现,若是不加这个 maskTop 层罩,在我鼠标进入原图区域空间时鼠标层罩不会跟着鼠标的移动而移动,更是会在鼠标移动时进行高频率的“颤动”,右边的放大区域空间也没有顺畅的跟着移动变化
2、若是没有添加 maskTop 层罩,在我鼠标移入原图区域空间时, mousemove 鼠标移动事件只执行了一次,似乎是因为鼠标层罩阻挡了
3、在之前有试过动态地确定鼠标层罩的初始位置,将其放在了mouseenter事件当中,结果 mouseenter 事件执行了异常多次,就像是变成了 mousemove 事件

有看过其他的放大镜案例,但是他们都不需要加 masktop 这个最顶层的覆盖层罩,期望能有路过的大佬帮忙解惑

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
匹配任意字符的正则表达式写法
Apr 29 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
Jqprint实现页面打印
Jan 06 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
Vue 幸运大转盘实现思路详解
May 06 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 Javascript
JavaScript封装单向链表的示例代码
Sep 17 #Javascript
vue修改Element的el-table样式的4种方法
Sep 17 #Javascript
vue+canvas实现拼图小游戏
Sep 18 #Javascript
JavaScript 常见的继承方式汇总
Sep 17 #Javascript
JavaScript 闭包的使用场景
Sep 17 #Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 #Javascript
js实现简单的随机点名器
Sep 17 #Javascript
You might like
写一个用户在线显示的程序
2006/10/09 PHP
一个很不错的PHP翻页类
2009/06/01 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
IE和Firefox下event事件杂谈
2009/12/18 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
vue-cli如何添加less 以及sass
2017/07/06 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
js实现打字小游戏
2019/12/17 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
python 输出一个两行字符的变量
2009/02/05 Python
Python生成不重复随机值的方法
2015/05/11 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
Python中作用域的深入讲解
2018/12/10 Python
python面试题小结附答案实例代码
2019/04/11 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
机关门卫岗位职责
2013/12/30 职场文书
生物制药专业求职信
2014/03/11 职场文书
报效祖国演讲稿
2014/09/15 职场文书
教师个人学习总结
2015/02/11 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python