javascript淘宝主图放大镜功能

2024-11-28 17:05:59

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

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部分代码也比较简单，我们直接讲解鼠标移动事件部分的代码。
首先用一张图来解释一下获取鼠标相对与小图位置的原理：

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

然后我们讲解代码：

右边大图框中的图片使用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 图片放大镜（可拖放、缩放效果）第1/4页

前些日子突然想做一个透镜效果,就突然想到了这个效果,于是找出当年"珍藏"的代码决定一尝所愿. 前言:这个程序主要分三部分:层的拖放.层的缩放.图片切割(包括预览). 其中层的拖放是很常见的效果,层的缩放有点难度,图片切割看着炫其实原理也很简单. 不过在实现的过程中也学习到很多以前不知道的东西,下面都会说明,希望大家从中也能学到东西. 原理: [拖放程序] 基本原理很简单,不知道的看代码就明白,其中参考了越兔和BlueDestiny的相关文章. 下面说一下比较有用的地方: [范围限制]
js放大镜放大图片效果

我们 js图片放大镜 body { background: #222; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #screen span { position:absolute; overflow:hidden; border:#FFF solid 1px; background:#FFF; } #screen img{ position:absolute; le
JavaScript图片放大镜效果代码[代码比较简单]

#div1 { width:304px; height:222px; position:relative; margin:30px auto 0px;} #div1 img{width:304px; height:222px;} #div1 span { width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); op
基于jQuery仿淘宝产品图片放大镜特效

在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果常用的js组件jquery.imagezoom,jquery.jqzoom,jquery.zoom等这些组件大同小异. 大家感兴趣的话可以去百度一下. 本文主要是使用非组件方法来做放大镜效果. 每一张图片都要生成三种尺寸,否则放大镜的效果不会太明显,这里是 54X54 320X320 800X800. 首先看效果:鼠标经过小图时,大图随之切换. 首先是html <div c
原生js写的放大镜效果

我的大体思路是:时时监听鼠标的坐标,当鼠标移动时,透明层随着鼠标移动,大图片相对透明层的移动而移动.不废话了,看代码. 复制代码代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>放大镜</title> <meta name="Keywords" content=""> <me
基于jQuery仿淘宝产品图片放大镜代码分享

这篇文章主要介绍了jQuery淘宝产品图片放大镜特效,鼠标点击图片,图片放大,特别适合图片细节展示,感兴趣的小伙伴可以参考下. (1)html代码: <div class="box"> <div class="tb-booth tb-pic tb-s310"> <a href="images/01.jpg"> <img src="images/01_mid.jpg" alt="
电子商务网站上的常用的js放大镜效果

复制代码代码如下: jsFiddleRun again Edit this fiddle Result HTML <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>放大镜</title> <style> img{ vertical-align:bottom;} .mod_zoom{ overflow:hidden; zoom:
基于jQuery实现放大镜特效

相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的文章中,我们将向大家介绍通过jQuery实现放大镜效果. 1.实现原理首先,我们讲解一下放大镜效果的实现方式: 方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位置. 方法二:对原图片进行放大,也就是调整原图的长和宽. 上面我们介绍了通过两种方式实现放大镜效果,接下来,我们将以上的两种方式应用到我们的jQuery
奇妙的Javascript图片放大镜

在Flash中我们用蒙板加上一些简单的脚本便可实现一个动态的图片放大镜.现在我们只用JavaScript结合CSS语言也可以轻易做出这个效果. 制作思路:"放大镜"后有一幅背景图,它是"放大了"的图的原本.我们通过移动"放大镜"时适当调整背景图的位置,使它显示的刚好是需要要放大的部分. 效果演示: (点这里在新窗口中查看) 制作步骤: 1)先准备两幅内容相同尺寸不同的图片,这里我们找了一个400×300像素的缩略图small_hill.gif,一
jquery实现图片放大镜功能

实现原理: 这里用到了两张图片,一张小图,一张大图.将大图设置为放大镜的背景图片,当鼠标在小图上移动时,同时控制背景大图在放大镜中的位置.两张图片大小最好是等比例的,这样才能达到最佳效果.当没有大图时,则默认为小图本身,这时由于两张图片大小一样,因此放大镜效果不明显,就跟没放大是一样的. 此插件用到了html5,css3的一些属性,ie8及以下版本不兼容,放大镜是方形的. 运行效果截图如下: 具体代码如下: (function () { $.fn.Magnifier = function (op

javascript淘宝主图放大镜功能

相关推荐

随机推荐