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放大
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did48182