在很多的电商商品展示网页中，都会出现放大产品细节的功能，这里就根据主要原理，简单用css和js实现这个效果：

实现原理：

1、选择两张内容相同，大小不一致的图片，一个是要待选择细节的小图片，另一张是用来展示细节的大图片。

2、要出现“选择小图片哪个细节”就展示出“大图片相同部分的细节内容”，这里就牵扯到比例的问题，即小图片中， 鼠标选择出的细节大小与整个小图片的长宽比例，要和大图片展示出的区域与大图片的长宽比例一致，这样效果才会逼真，
如下图：

1

根据比例相等我们可以得到公式：h1/h2 = h3/h4 ;  w1/w2 = w3/w4
由于图片的长宽在选择的时候就已经固定好了，要改变的就是小图片上的那块悬浮层大小根据比例做出相应的改变。

3、当鼠标在小图片上移动的时候，根据比例大图片在显示区域移动，这样才会出现效果。

HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>自定义图片放大器</title>
</head>
<body>
<div id="show_bigger_pic">
<span class="cover"></span>
<span class="float_span"></span>
<div class="small_pic_div">
<img src="img/small.bmp" alt="" />
</div>
<div class="big_pic_div">
<img src="img/big.bmp" alt="" />
</div>
</div>
</body>
</html>

CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
*{margin:0;padding:0;}

  #show_bigger_pic{
      position:absolute;
      width:800px;
      height:400px;
      top:200px;
      left:200px;
  }
  .small_pic_div{
      width:273px;
      height:177px;
      border:1px solid;
      float:left;
      position:relative;/*  cover:absolute定位使用*/
  }
  .big_pic_div{
      width:273px;
      height:177px;
      border:1px solid;
      float:left;
      margin-left:10px;
      display:none;
      overflow:hidden;
  }
  .big_pic_div>img{
      position:relative;
  }
  .cover{
      width:273px;
      height:177px;
      position:absolute;
      border:1px solid;
      z-index:2;
      left:0;
      top:0;
  }
  .float_span{
      width:80px;
      height:80px;
      position:absolute;
      z-index:1;
      background:#B2DFEE;
      opacity:0.5;
      display:none;
      border:1px solid;
      left:0;
      top:0;
  }

Javascript代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
function gbc(tparent,tclass){//获取指定父元素的指定类的子元素的函数
      var allclass=tparent.getElementsByTagName('*');
      var result=[];
      for (var i=0;i<allclass.length;i++)
      {
          if(allclass[i].className==tclass)
          result.push(allclass[i]);
      }
      return result;//返回的是数组
  }

  window.onload =function (){
      var sbp=document.getElementById('show_bigger_pic');//获取最外层div
      var  c=gbc(sbp,'cover')[0];//获取cover层
      var  fs=gbc(sbp,'float_span')[0];//获取浮动层
      var spd=gbc(sbp,'small_pic_div')[0];//获取小图div
      var sp=spd.getElementsByTagName('img')[0];//获取小图
      var bpd=gbc(sbp,'big_pic_div')[0];//获取大图div
      var bp=bpd.getElementsByTagName('img')[0];//获取大图

      var btn=true;//开关，因参数只需获取一次

      c.onmouseover  =function(){//鼠标移入小图
          fs.style.display="block";
          bpd.style.display="block";
          c.style.cursor="pointer";

          if(btn){
              //按照比例要得到浮动层的大小
              //大小图像的长之比

              var cb = sp.offsetHeight/bp.offsetHeight;
              var fsw = Math.ceil(cb * bpd.offsetHeight);//比例计算
              fs.style.height = fsw+"px";
              //alert(fs.offsetHeight+"   "+Math.ceil(cb * bpd.offsetHeight));
              var kb = sp.offsetWidth/bp.offsetWidth;
              var fsh = Math.ceil(cb * bpd.offsetWidth);
              fs.style.width = fsh+"px";

              btn = false;
          };

      };

      c.onmouseout  =function(){//鼠标移出
          fs.style.display="none";
          bpd.style.display="none";
      };

      c.onmousemove =function (ev){//鼠标移动

          //保存高比例
          var hb = sp.offsetHeight/fs.offsetHeight;
          //保存宽比例
          var wb = sp.offsetWidth/fs.offsetWidth;

          var pos=ev||event;
          var left=pos.clientX-sbp.offsetLeft-fs.offsetWidth/2;//计算left
          var top=pos.clientY-sbp.offsetTop-fs.offsetHeight/2;//计算top
          if(left<0){ left=0;//当小于0强制固定 } else if(left>spd.offsetWidth-fs.offsetWidth){//大于某一参数也固定，以防浮动层移出图片区
              left=c.offsetWidth-fs.offsetWidth;
          }
          if(top<0){ top=0; } else if(top>spd.offsetHeight-fs.offsetHeight){
              top=c.offsetHeight-fs.offsetHeight;
          }
          fs.style.left=left+"px";//浮动层位置改变
          fs.style.top=top+'px';

          bp.style.left=-wb*left+"px";//右边大图位置的改变，表现在实际中是放大区改变
          bp.style.top=-hb*top+"px";
      };
  }

效果图：
6