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