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 相关文章推荐
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
Oct 20 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
javascript操作excel生成报表示例
May 08 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
webpack 模块热替换原理
Apr 09 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 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
You might like
php allow_url_include的应用和解释
2010/04/22 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
python单链表实现代码实例
2013/11/21 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
python基础教程之五种数据类型详解
2017/01/12 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
使用python去除图片白色像素的实例
2019/12/12 Python
python不同版本的_new_不同点总结
2020/12/09 Python
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
幼儿园教师教育感言
2014/02/28 职场文书
工作证明格式范文
2015/06/15 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python