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 相关文章推荐
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
GRID拖拽行的实例代码
Jul 18 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 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实现快速排序的三种方法分享
2014/03/12 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
pycharm安装图文教程
2017/05/02 Python
import的本质解析
2017/10/30 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
Python中按值来获取指定的键
2019/03/04 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
python中count函数简单的实例讲解
2020/02/06 Python
pandas按条件筛选数据的实现
2021/02/20 Python
python推导式的使用方法实例
2021/02/28 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
理工大学毕业生自荐信
2013/11/01 职场文书
求职自荐信格式
2013/12/04 职场文书
简历的自荐信
2013/12/19 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
教师四风问题整改措施
2014/09/25 职场文书
结婚十年感言
2015/07/31 职场文书