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的蒙版，然后在放大区以两倍的放大倍数显示出来。