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 相关文章推荐
页面中js执行顺序
Nov 09 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
简单谈谈React中的路由系统
Jul 25 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
VueJS 取得 URL 参数值的方法
Jul 19 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 Javascript
vue实现循环滚动列表
Jun 30 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
php 删除无限级目录与文件代码共享
2008/11/22 PHP
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
PHP下判断网址是否有效的代码
2011/10/08 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
python调用cmd命令行制作刷博器
2014/01/13 Python
利用python批量检查网站的可用性
2016/09/09 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
解决Python对齐文本字符串问题
2019/08/28 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
教师自我评价范例
2013/09/24 职场文书
4s店总经理岗位职责
2013/12/31 职场文书
《尊严》教学反思
2014/02/11 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
导游词之西安骊山
2019/12/20 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python