今天在练习一个vue电商项目是，遇到一个图片放大区觉得很难理解，于是就动手使用原生js做了一个。

HTML，JS部分代码

    <div class="zoomContainer"><!-- 图片最上方的蒙板，用来给放大区域做定位 --><div class="panel"></div><!-- 显示正常大小图片的地方 --><div class="imageArea"><img src="./an.jpg" /></div><!-- 要放大的区域 --><div class="zoomArea"></div><!-- 显示放大图片的地方 --><div class="bigImageArea"><img src="./an.jpg" class="bigImage" /></div></div>//获取dom节点
const panel = document.querySelector(".panel");
const zoomArea = document.querySelector(".zoomArea");
const bigImageArea = document.querySelector(".bigImageArea");
const bigImage = document.querySelector(".bigImage");panel.onmousemove = function (event) {//鼠标进入展示需要放大的区域和放大后的图片zoomArea.style.display = "block";bigImageArea.style.display = "block";//获取展示区域的坐标let imageX = event.offsetX;let imageY = event.offsetY;//计算出展示区的偏移量let left = imageX - zoomArea.offsetWidth / 2;let top = imageY - zoomArea.offsetHeight / 2;//判断，如果超出图片范围进行设置if (left >= zoomArea.offsetWidth) {left = zoomArea.offsetWidth;}if (left <= 0) {left = 0;}if (top >= zoomArea.offsetHeight) {top = zoomArea.offsetHeight;}if (top <= 0) {top = 0;}//修改偏移量zoomArea.style.left = left + "px";zoomArea.style.top = top + "px";bigImage.style.left = -2 * left + "px";bigImage.style.top = -2 * top + "px";
};
//当鼠标离开隐藏展示区
panel.onmouseleave = function () {zoomArea.style.display = "none";bigImageArea.style.display = "none";
};

效果展示

开发中的问题及解决方法

1.获取要放大的区域出现卡顿

需要放大的部分为图片大小的四分之一，鼠标在图片上移动时显示放大要放大的区域以及左侧放大后的图片，如果直接给图片绑定onmousemove事件，那么鼠标移动时绿色的放大区域会出现在图片上方并跟随鼠标移动，此时给图片绑定的onmousemove事件就监听不到了，而且还出现卡顿。

解决办法

在图片的上方加一层蒙版，并设置z-index的css属性使其漂浮在图片区域的最上方，然后给蒙版绑定鼠标事件获取坐标，因为蒙版是在最上方的，所以绿色框出现不会影响蒙版的onmousemove事件。

2.获取图片宽高失败

因为绿色框的left，top属性的计算需要用到元素的宽高属性，通过dom.style.width/height发现获取不到dom的宽高。后查阅资料得知只有写在行内的css样式才能使用这种方法获取到。

解决办法

使用window.getComputedStyle(dom元素,‘伪类’).属性名，或者dom的offsetWidth、offsetHeight来获取。

完整代码

完整代码链接：https://github.com/liuyasai/imageZoom

使用原生js实现图片放大器效果相关推荐

html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...
html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
原生JS实现图片跑马灯特效
今天给大家分享一个用原生JS实现的图片跑马灯特效,效果如下: 实现的代码如下,欢迎大家复制粘贴. <!DOCTYPE html> <html><head><m ...
如何用原生JS制作图片时钟
程序设计之道无远弗届,御晨风而返.---- 杰佛瑞 · 詹姆士今天分享一个小demo,如何用原生JS制作图片时钟,话不多说上代码. html[外链图片转存失败(img-mD0n42FM-156223 ...
如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0（还有新版本）？...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
原生JS实现图片滚动
2019独角兽企业重金招聘Python工程师标准>>> 原生JS实现图片滚动一.原理黑色盒子是最终显示滚动图像的区域,绿色盒子为其子容器,其宽度要大于黑色外层盒子,这样才能通过设 ...
html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
十分钟教会你原生JS压缩图片，极其精简版
十分钟教会你原生JS压缩图片,极其精简版原文链接:https://blog.csdn.net/yasha97/article/details/83629510 (一)实现思路先通过input标签获 ...
JS实现图片幻灯片效果
代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> &l ...
手机端移动端的前端原生js裁剪图片上传
手机端移动端的前端原生js裁剪图片上传选择头像时裁剪上传,确保图片是个正方形,不会出现压扁拉伸的现象效果图原理很简单,其实就是用canvas截图出来而已,只是要对比例做一下处理. <!-- ...

使用原生js实现图片放大器效果

HTML，JS部分代码

效果展示

开发中的问题及解决方法

1.获取要放大的区域出现卡顿

解决办法

2.获取图片宽高失败

解决办法

完整代码

使用原生js实现图片放大器效果相关推荐

最新文章

热门文章