首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript淘宝主图放大镜功能

Posted in Javascript onOctober 20, 2016

工欲善其事，必先利其器。想要实现某一种效果，我们必须要先了解其中的原理。
放大镜的功能就是通过获取鼠标在小图中的位置，然后根据大小图的尺寸比例换算出大图需要显示的部分，然后使用定位让大图要显示的部分出现在右边的边框内。
然后看代码，根据代码看讲解会更容易理解。

html部分

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>放大镜效果</title> 
 <link rel="stylesheet" href="magnifier.css"> 
</head> 
<body> 
 <div id="wrapper"> 
 <!--小图--> 
  <div id="img_min"> 
  <!--图片--> 
  <img src="test.jpg" alt="min"> 
  <!--跟随鼠标的白块--> 
  <p id="mousebg"></p> 
  </div> 
  <!--大图--> 
  <div id="img_max"><img id="img2_img" src="test.jpg" alt="max"></div> 
 </div> 
 <script type="text/javascript" src="magnifier.js"></script> 
</body> 
</html>

css部分

*{ 
 margin: 0; 
 padding: 0; 
} 
div{ 
 position: relative; 
} 
div>div{ 
 width: 300px; 
 height: 300px; 
 float: left; 
 margin: 100px; 
 overflow: hidden; 
} 
#img_min>img{ 
 /*display: block;*/ 
 width: 300px; 
} 
#img_max{ 
 display: none; 
  
} 
#img_max>img{ 
 position: absolute; 
 top: 0; 
 left: 0; 
 display: block; 
 width: 1500px; 
} 
#mousebg{ 
 display: none; 
 position: absolute; 
 width: 60px; 
 height: 60px; 
 background-color: rgba(255,255,255,.7); 
 top: 0; 
 left: 0; 
}

最重要的javascript部分

window.onload = function () { 
 var img1 = document.getElementById('img_min');//小图盒子 
 var img2 = document.getElementById('img_max');//大图盒子 
 var img2_img = document.getElementById('img2_img');//大图图片 
 var wrap = document.getElementById('wrapper'); 
 var mousebg = document.getElementById('mousebg');//鼠标白块 
 var mul = 5; 
 //当某一个模块dispaly:none的时候不能使用offsetWidth获取它的宽高 
 img1.onmouseover = function () { 
  //鼠标进入 
  img2.style.display = 'block'; 
  mousebg.style.display = 'block'; 
   
 } 
 img1.onmouseout = function () { 
  //鼠标离开 
  img2.style.display = 'none'; 
  mousebg.style.display = 'none'; 
 } 
 img1.onmousemove = function (event) { 
  var _event = event||window.event;//兼容性处理 
  var mouseX = _event.clientX - wrap.offsetLeft - img1.offsetLeft; 
  //计算鼠标相对与小图的位置 
  var mouseY = _event.clientY - wrap.offsetTop - img1.offsetTop; 
 
  //特殊情况处理，分别靠近四条边的时候 
  if(mouseX<mousebg.offsetWidth/2){ 
   mouseX = mousebg.offsetWidth/2; 
  } 
  if(mouseX>img1.offsetWidth-mousebg.offsetWidth/2){ 
   mouseX = img1.offsetWidth-mousebg.offsetWidth/2; 
  } 
  if(mouseY<mousebg.offsetHeight/2){ 
   mouseY = mousebg.offsetHeight/2; 
  } 
  if(mouseY>img1.offsetHeight-mousebg.offsetHeight/2){ 
   mouseY = img1.offsetHeight-mousebg.offsetHeight/2; 
  } 
  //计算大图的显示范围 
  img2_img.style.left = -mul*mouseX+img2.offsetWidth/2+"px"; 
  img2_img.style.top = -mul*mouseY+img2.offsetHeight/2+"px"; 
  //使鼠标在白块的中间 
  mousebg.style.left = mouseX-mousebg.offsetWidth/2+"px"; 
  mousebg.style.top = mouseY-mousebg.offsetHeight/2+"px"; 
   
 } 
}

如果你看完代码和注释已经理解了，用李云龙的一句话说：“哎呀，你小子tnd还真是个天才”。那么下面的解析部分你快速的浏览完就OK了。

解析部分：

html和css部分都是简单的布局代码，不再讲解，js部分代码也比较简单，我们直接讲解鼠标移动事件部分的代码。
首先用一张图来解释一下获取鼠标相对与小图位置的原理：

javascript淘宝主图放大镜功能

可以看到通过代码中的运算，我们所获取的值就是鼠标相对于img1左上角的值。
理解了这一步之后，其实可以说我们的工作已经完成了一半了。
然后，我们先跳过特殊情况的处理，直接进行右边图片定位的基本运算。
因为有用到offsetWidth、offsetHeight、style.width、style.height属性，其中style.width、style.height和offsetWidth、offsetHeight的范围是相同的，其他不同我会在另一篇博客中详细描述。我们先用一张图了解下这几个属性，同时和上面的几个属性进行对比（图片来自互联网，侵删）

javascript淘宝主图放大镜功能

然后我们讲解代码：

右边大图框中的图片使用style.left定位在大图框中的位置，负号是因为我们鼠标的运动方向刚好是和我们大图框中的图片运动的方向相反，mul则是根据大图和小图的尺寸计算出来的比例，-mul*mouseX计算出来的其实就是图片在大图框中的相对位置，但是此时你会发现你鼠标所在的位置在右边是在图框的左上角的，所以我们要加上一个 img2.offsetWidth/2 来让图片居中显示。同样我们在纵坐标进行相同的处理就好了。

//计算大图的显示范围 
  img2_img.style.left = -mul*mouseX+img2.offsetWidth/2+"px"; 
  img2_img.style.top = -mul*mouseY+img2.offsetHeight/2+"px";

下面我们就要进行特殊情况的处理了，做到上一步的时候你会发现，在鼠标移动到边缘的时候，鼠标那个小白块有时候会跑出图片的范围，所以我们就要进行处理将它限制在图片的范围内，因为鼠标是在白色透明块的中间，所以我们就是将鼠标限制在距离图片边框上下左右二分之一白块长/宽的位置即可。

//特殊情况处理，分别靠近四条边的时候 
  if(mouseX<mousebg.offsetWidth/2){ 
   mouseX = mousebg.offsetWidth/2; 
  } 
  if(mouseX>img1.offsetWidth-mousebg.offsetWidth/2){ 
   mouseX = img1.offsetWidth-mousebg.offsetWidth/2; 
  } 
  if(mouseY<mousebg.offsetHeight/2){ 
   mouseY = mousebg.offsetHeight/2; 
  } 
  if(mouseY>img1.offsetHeight-mousebg.offsetHeight/2){ 
   mouseY = img1.offsetHeight-mousebg.offsetHeight/2; 
  }

当距离左边小于二分之一宽的时候，我们就让mouseX等于二分之一宽，这样白块就不会继续移动，其他三个方向同理。
做完这一步，我们的效果也就全部完成了。
ps:抽象的地方可以通过画图来帮助理解。

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

javascript淘宝主图放大镜功能

- Author -

张飞翔

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
JavaScript数组方法总结分析
May 06 Javascript
angular中的cookie读写方法
Aug 02 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
基于Vue的侧边目录组件的实现
Feb 05 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 #Javascript
一个极为简单的requirejs实现方法
Oct 20 #Javascript
JavaScript实现窗口抖动效果
Oct 19 #Javascript
原生js图片轮播效果实现代码
Oct 19 #Javascript
Angular2表单自定义验证器的实现
Oct 19 #Javascript
javascript滚轮控制模拟滚动条
Oct 19 #Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 #Javascript
模拟人生(1) AGC(1) 原神(1) 大话西游(1) 遗弃(1) 战锤40K(1) 绿林侠盗(1) 铁拳(1) 吸血鬼(1) 死亡搁浅(1)
You might like
如何使用PHP中的字符串函数
2006/10/09 PHP
实例：用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
javascript的动态加载、缓存、更新以及复用（一）
2014/06/09 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
Python函数学习笔记
2008/10/07 Python
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python学习笔记之os模块使用总结
2014/11/03 Python
python使用append合并两个数组的方法
2015/04/28 Python
python实现八大排序算法（1）
2017/09/14 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
Python pickle模块实现对象序列化
2019/11/22 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
python爬虫要用到的库总结
2020/07/28 Python
Python连接Impala实现步骤解析
2020/08/04 Python
药学专业大学生个人的自我评价
2013/11/04 职场文书
简单的辞职信范文
2014/01/18 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
单位工作证明范文
2014/09/14 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
行政处罚告知书
2015/07/01 职场文书