js图片放大镜效果实现方法详解


Posted in Javascript onOctober 28, 2020

由项目需要,原生写了个详情页图片放大镜的效果,扔上代码供学习分享,也作为日常笔记...

效果如图(例子中偷偷链了张天猫的图片,希望没啥事 -。-):

js图片放大镜效果实现方法详解

实现过程教简单,但我们还是从css开始分析,过程如下(图片已正方形为例):

css:

/* 图片容器 */
 .imgBox{
 width: 200px; /* 各位大老爷们看着办 */
 height: 200px; /* 各位大老爷们看着办 */
 position: relative; /* 必需 */
 }

 /* 图片标签 */
 .mainImg{
 width: 100%; /* 各位大老爷们看着办,尽量100%好看些[斜眼笑] */
 height: 100%; /* 各位大老爷们看着办,尽量100%好看些[斜眼笑] */
 }

 /* 遮罩层-既放大区域 */
 .glass{
 position: absolute; /* 必需 */
 width: 50px; /* 遮罩层宽度 此处是放大4倍,所以为200/4=50 */
 height: 50px; /* 遮罩层高度 此处是放大4倍,所以为200/4=50 */
 top: -9999px; /* 绝对位置,先放远些 */
 left: -9999px; /* 绝对位置,先放远些 */
 cursor: move; /* 鼠标样式,好看些 */
 background: rgba(0,0,180,0.5); /* 遮罩层样式,好看些 */
 }

 /* 大图所在的容器 */
 .imgMax{
 position: absolute; /* 必需 */
 overflow: hidden; /* 必需,盖掉超出的大图[斜眼笑] */
 left: 210px; /* 必需,此处为距原图左边10像素 */
 top: 0; /* 必需,此处为距上边0像素 */
 width: 200px; /* 放大图片容器的宽度 此处此处是放大4倍,为200,保持和原图容器一般大,若此处为400,则是放大2*4倍,那么相应的放大图片应该是200*4*2=1600 */
 height: 200px; /* 放大图片容器的高度 此处此处是放大4倍,为200,保持和原图容器一般大,若此处为400,则是放大2*4倍,那么相应的放大图片应该是200*4*2=1600 */
 display: none; /* 先隐藏 */
 }
 .maxImg{
 position: absolute; /* 必需 */
 width: 800px; /* 此处是放大4倍,所以为200*4=800 受放大图片所在的容器影响,规则如上 */
 height: 800px; /* 此处是放大4倍,所以为200*4=800 受放大图片所在的容器影响,规则如上 */
 }

上面css中需要注意的就是几个position和缩放比例,注意调整下即可

写完样式,来看看布局:

html:

<!-- 图片容器 -->
 <div class="J_imgBox imgBox">
 <!-- 需要放大的图片-原始图 -->
 <img class="J_mainImg mainImg" src="http://img.alicdn.com/bao/uploaded/i7/TB1Xpe_NXXXXXXRXFXXGTq09XXX_035318.jpg_430x430q90.jpg" />
 <!-- 遮罩-既放大的区域 -->
 <div class="J_glass glass"></div>
 <!-- 大图的容器 -->
 <div class="J_imgMax imgMax">
 <!-- 大图 -->
 <img class="J_maxImg maxImg" />
 </div>
 </div>

接下来是主要的js代码,一如既往的带注解:

js:

(function(){
 /* 放大镜函数
 ** @imgContainer 需要实现放大镜效果的图片容器 此处是 class 为 J_imgBox 的 div
 */
 function imgZoom(imgContainer){

 // 取大图url,不知道淘宝图片规则如何,反正看了详情页的大图和小图url对比,随便写了个替换
 var imgUrl = imgContainer.querySelector('.J_mainImg').src.replace(/\.(jpg|jpeg|png|gif)(_)(\d+)(x)(\d+)(q90)?/g,'');

 // 取大图标签的节点
 var maxImg = imgContainer.querySelector('.J_maxImg');

 // 给该节点的src属性赋值为大图的url
 maxImg.src = imgUrl;

 // 取大图所在的容器
 var maxImgContainer = imgContainer.querySelector('.J_imgMax');

 // 取遮罩块
 var glassBlock = imgContainer.querySelector('.J_glass');

 // 取消放大镜效果
 var hideMaxImg = function(){
 glassBlock.style.top = '-9999px';
 glassBlock.style.left = '-9999px';
 maxImgContainer.style.display = 'none';
 }

 // 鼠标移出图片区域,取消放大镜效果
 imgContainer.onmouseout = function(event){
 event.stopPropagation();
 hideMaxImg();
 };

 // 鼠标在图片区域内移动事件
 imgContainer.onmousemove = function(event) {
 event.stopPropagation();

 // 取图片容器的大小及其相对于视口的位置,需要实时取,所以放在move事件里
 var clientRect = event.currentTarget.getBoundingClientRect();

 // 获取距鼠标距的上和左的坐标
 var leftX = event.clientX - clientRect.left;
 var leftY = event.clientY - clientRect.top;

 // 动态设置遮罩块的left和top位置 这里需要减去遮罩层的一半,因为鼠标位于遮罩块中心点
 var pointerLeft = leftX - 25;
 var pointerTop = leftY - 25;

 // 如果鼠标坐标移动超出原始图片区域边缘 则取消放大镜效果 因为这里存在快速移动鼠标到大图区域时,鼠标仍处在外层的图片区域内,并不会触发mouseout事件(虽然中间隔了小小的间距,但是快速移动仍能产生这个bug,如代码下面的图所示)
 if((pointerLeft+25) > clientRect.width || pointerLeft < 0 - 25 || (pointerTop+25) > clientRect.height || pointerTop < 0 - 25){
 hideMaxImg();
 return !1;
 };

 // 遮罩块在最左边的时候,鼠标仍在图片区域内,可在遮罩块左边缘至中心线区域内移动,且这时遮罩块为距左0像素
 if(pointerLeft < 0){
 pointerLeft = 0;
 };

 // 同上 右边限制
 if(pointerLeft > clientRect.width - 50){
 pointerLeft = clientRect.width - 50;
 };

 // 同上 顶部限制
 if(pointerTop < 0){
 pointerTop = 0;
 };

 // 同上 底部限制
 if(pointerTop > clientRect.height - 50){
 pointerTop = clientRect.height - 50;
 };

 // 设置遮罩块的位置
 glassBlock.style.left = pointerLeft;
 glassBlock.style.top = pointerTop;

 // 取遮罩快距离左边的位置和图片区域的宽高比,用于计算大图偏移距离,展示遮罩块所对应的图片区域
 var percentLeft = pointerLeft/clientRect.width;
 var percentHeight = pointerTop/clientRect.height;

 // 设置大图偏移距离 因为其父元素存在 overflow:hidden 所以只会展示对应区块
 maxImg.style.left = -(percentLeft*maxImg.clientWidth)+'px';
 maxImg.style.top = -(percentHeight*maxImg.clientHeight)+'px';
 };
 }

 var elem = document.querySelectorAll('.J_imgBox');

 elem.forEach(function(item,idx){
 imgZoom(item)
 })
 })()

补bug图:

js图片放大镜效果实现方法详解

看完后是不是觉得简直不要太简单,接下来就来理一理以上代码中能够抽取出来在平常开发中比较实用的知识点:

Element.getBoundingClientRect()

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置

例子:

<body style="width:1400;height:1000">
<div id="testDiv" style="width:10px;height:20px;background:#f00"></div>
<script>
(function(){
var elem = document.getElementById('testDiv');
document.body.addEventListener('click',function(){
console.log(elem.getBoundingClientRect())
},false)
})()
</script>
</body>

效果如图:

js图片放大镜效果实现方法详解

从效果图上不难看出,当我移动视图后再点击body,打印的对象都能够正确返回元素的大小及其相对于视口的位置

这个方法也可以用于实现当某元素滚动到底/顶部时触发对应事件,相当方便。

Event

1.event.target 和 event.currentTarget

    target:指向触发事件的元素

    currentTarget:指向被绑定事件句柄的元素

    只有当绑定的事件处理程序与触发该事件处理程序都为同一个对象的时候,两者相同

    例子代码:

    html:

<div id="aDiv">
 123
 <div id="bDiv">456</div>
 </div>

js:

document.getElementById('aDiv').addEventListener('click',function(e){
 if(e.target === e.currentTarget) {
 console.log('target === currentTarget')
 }else{
 console.log('target !== currentTarget')
 }
 console.log('target',e.target)
 console.log('currentTarget',e.currentTarget)
 },false)

    效果图:

js图片放大镜效果实现方法详解

    从效果图中,我们可以看到,当点击456时,target指向的是456所在的bDiv,currentTarget则指向aDiv,因为事件是绑定在aDiv上,但触发是在bDiv上,而且bDiv又在aDiv内,当点击123时,则target与currentTarget一致,绑定和触发都在aDiv上。

2.event.preventDefault() & event.stopPropagation()

    preventDefault:如果事件可取消,则取消该事件,而不停止事件的进一步传播

    stopPropagation:阻止捕获和冒泡阶段中当前事件的进一步传播

3.event.stopPropagation() & event.stopImmediatePropagation()

    stopPropagation:阻止捕获和冒泡阶段中当前事件的进一步传播

    stopImmediatePropagation:阻止元素上调用相同事件的其他事件监听并阻止冒泡

    两者区别的例子:

  html:

<div id="aDiv">
 123
 <div id="bDiv">456</div>
 </div>

    js:

document.getElementById('aDiv').addEventListener('click',function(){
 console.log('click aDiv')
 },false)
 document.getElementById('bDiv').addEventListener('click',function(e){
 e.stopImmediatePropagation();
 console.log('click bDiv')
 },false)
 document.getElementById('bDiv').addEventListener('click',function(){
 console.log('click me too')
 },false)

上面代码执行结果为:

click bDiv

注释掉 e.stopImmediatePropagation(); 的结果为:

click bDiv
click me too
click aDIV
 

虽然都是些简单的知识点,在平常开发中也是很实用的,希望能从细节出发,没事多复习复习 -。-~

后来一时兴起将放大镜写的更傻瓜式配置的插件了... 点我看代码(github地址)

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

Javascript 相关文章推荐
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
JS 修改URL参数(实现代码)
Jul 08 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
vue组件入门知识全梳理
Sep 21 Javascript
js a标签点击事件
Mar 30 #Javascript
JS+html5制作简单音乐播放器
Sep 13 #Javascript
TypeScript入门-接口
Mar 30 #Javascript
如何编写jquery插件
Mar 29 #jQuery
基于JavaScript实现瀑布流效果
Mar 29 #Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 #Javascript
JS变量及其作用域
Mar 29 #Javascript
You might like
第三节 定义一个类 [3]
2006/10/09 PHP
php 动态多文件上传
2009/01/18 PHP
php简单获取复选框值的方法
2016/05/11 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
js原型链原理看图说明
2012/07/07 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
Python中的异常处理学习笔记
2015/01/28 Python
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
python实现RSA加密(解密)算法
2016/02/17 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
python读取Excel表格文件的方法
2019/09/02 Python
Python 合并拼接字符串的方法
2020/07/28 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
采用怎样的方法保证数据的完整性
2013/12/02 面试题
先进员工获奖感言
2014/08/14 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
商务代表岗位职责
2015/02/15 职场文书
教师调动申请报告
2015/05/18 职场文书
社会实践心得体会范文
2016/01/14 职场文书
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏
vue动态绑定style样式
2022/04/20 Vue.js