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的蒙版，然后在放大區以兩倍的放大倍數顯示出來。