js实现放大镜效果

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style type="text/css">
 7 #pic{
 8     float:left;    
 9     }
10 #photo{
11     float:left;
12     height:100px;
13     width:100px;
14     margin-left:50px;
15     background-repeat:no-repeat;
16     background-image:url(1.jpg);
17     }
18 #mask{
19     width:50px;
20     height:50px;
21     background-color:#3FC;
22     position:absolute;
23     border-style:dashed;
24     border-color:#00F;
25     opacity:0.5;
26     }
27 </style>
28 </head>
29 
30 <body>
31 <div id="pic">
32 <img src="2.jpg" id="picture"  style="cursor:move"/>
33 </div>
34 <div id="photo"></div>
35 <div id="mask"></div>>
36 </body>
37 <script type="text/javascript">
38 document.body.addEventListener("mousemove",function(e){
39     var pho=document.getElementById("photo");
40     var pic=document.getElementById("pic");
41     {
42     var masker=document.getElementById("mask");
43     
44     masker.style.left=e.clientX-25+"px";
45     masker.style.top=e.clientY-25+"px";
46     pho.style.backgroundPosition=((50-e.clientX*2)+"px "+(50-e.clientY*2)+"px");
47     }
48 },false);
49 </script>
50 </html>

将小图名称改为2.jpg,大图名称改为1.jpg

以上即为demo部分，注意该demo请在非IE浏览器中运行，下面详细讲解一下设计思路

我主要采用一张大图跟一张小图，我这里小图的长宽都是大图的一半，当鼠标在小图上移动时，可以预先设定出一个区域，我的demo是以鼠标为中心，划分出一个50*50的预选区，所以在放大区就应该是100*100的区域，当鼠标移动到图片上时出现一个蒙版即预选区，同时在放大区生成一张大图。

代码部分：

1.html部分

1 <body>
2 <div id="pic">
3 <img src="2.jpg" id="picture"  style="cursor:move"/>
4 </div>
5 <div id="photo"></div>
6 <div id="mask"></div>>
7 </body>

三个div没什么好说的，一个图片区域pic，一个放大区photo，一个蒙版区mask

2.css部分

 1 <style type="text/css">
 2 #pic{
 3     float:left;    
 4     
 5     }
 6 
 7 #photo{
 8     float:left;
 9     height:100px;
10     width:100px;
11     margin-left:50px;
12     background-repeat:no-repeat;
13     background-image:url(1.jpg);
14     }
15 #mask{
16     width:50px;
17     height:50px;
18     background-color:#3FC;
19     position:absolute;
20     border-style:dashed;
21     border-color:#00F;
22     opacity:0.5;
23     }
24 </style>

需要说一下的是，mask蒙版区域大小为50*50，所以放大区相应的放大一倍即为100*100，opcity为蒙版透明度

3.js部分

 1 <script type="text/javascript">
 2 document.body.addEventListener("mousemove",function(e){
 3     var pho=document.getElementById("photo");
 4     var pic=document.getElementById("pic");
 5     {
 6     var masker=document.getElementById("mask");
 7     
 8     masker.style.left=e.clientX-25+"px";
 9     masker.style.top=e.clientY-25+"px";
10     pho.style.backgroundPosition=((50-e.clientX*2)+"px "+(50-e.clientY*2)+"px");
11     }
12 },false);
13 </script>

捕捉鼠标移动事件，e.clientX为当前鼠标坐标，以鼠标为中心做一个50*50的蒙版，然后在放大区以两倍的放大倍数显示出来。

标签: js放大