<!
DOCTYPE html PUBLIC 
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
 
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>





<
html xmlns
=
"
http://www.w3.org/1999/xhtml
"
>



<
html
>


    
<
head
>


        
<
title
>
wujinjian
<
/
title>



        
<
base href
=
"
http://i3.6.cn/cvbnm/34/d2/48/
"
>


        
<
script type
=
"
text/javascript
"
>




            
/*


             *特别注意:

             *放大的倍数=原图的大小/小图片显示的大小

             *自己查看原图片的大小，我这是 400*400 px

             
*/




            
//
图片对象



            
var
 imgObj;

            
//
放大镜div对象



            
var
 zoomDivObj;

            
//
显示小图片的div



            
var
 mainDivObj;

            
//
放大后显示图片的div



            
var
 showDivObj;

            
//
放大镜的大小



            
var
 zoomSize
=
50
;

            
//
放大镜的倍数(不能随便填)



            
var
 zoomMultiple
=
2
;

            
//
图片的路径



            
var
 imgPath
=
"
7d0fe1b65e1389c46045cd2d0e43a041.gif
"
;

            
//
小图片显示的大小



            
var
 imgW
=
200
;

            
var
 imgH
=
200
;

            
//
显示的位置



            
var
 left
=
100
;

            
var
 top
=
10
;

            
//
放大镜div的透明度(0~100)



            
var
 opacity
=
50
;

            
//
放大镜div的颜色



            
var
 rgb
=
"
223,223,223
"
;



            
function
 load()

            {

                
if
(zoomDivObj
==
null
)

                    createZoomDivObj();

                
if
(mainDivObj
==
null
)

                    createMainDivObj();

                
if
(showDivObj
==
null
)

                    createShowDivObj();

                
if
(imgObj
==
null
)

                    createImgObj();



                zoomDivObj.style.width
=
zoomSize
+
"
px
"
;

                zoomDivObj.style.height
=
zoomSize
+
"
px
"
;



                showDivObj.style.width
=
zoomSize
*
zoomMultiple
+
"
px
"
;

                showDivObj.style.height
=
zoomSize
*
zoomMultiple
+
"
px
"
;



                showDivObj.style.backgroundImage
=
"
url(
"
+
imgPath
+
"
)
"
;



                imgObj.src
=
imgPath;

                imgObj.style.width
=
imgW
+
"
px
"
;

                imgObj.style.height
=
imgH
+
"
px
"
;



                mainDivObj.style.width
=
imgW
+
"
px
"
;

                mainDivObj.style.height
=
imgH
+
"
px
"
;

                mainDivObj.style.left
=
left
+
"
px
"
;

                mainDivObj.style.top
=
top
+
"
px
"
;



                showDivObj.style.left
=
left
+
imgW
+
50
+
"
px
"
;

                showDivObj.style.top
=
top
+
"
px
"
;



                zoomDivObj.style.backgroundColor
=
"
rgb(
"
+
rgb
+
"
)
"
;

                

                
//
两个都要写，为了IE 和 火狐 的通用



                zoomDivObj.style.filter
=
"
alpha(opacity=
"
+
opacity
+
"
)
"
;

                zoomDivObj.style.opacity
=
opacity
/
100;



            }



            
function
 showZoomDiv()

            {

                
if
(zoomDivObj
==
null
)

                    createZoomDivObj();



                zoomDivObj.style.visibility
=
"
visible
"
;

            }

            

            
function
 moveZoomDiv(e)

            {

                
if
(zoomDivObj
==
null
)

                    createZoomDivObj();



                
var
 w
=
zoomDivObj.style.width.replace(
"
px
"
,
""
)
-
0
;

                
var
 h
=
zoomDivObj.style.height.replace(
"
px
"
,
""
)
-
0
;

                

                
if
(mainDivObj
==
null
)

                    createMainDivObj();



                
var
 mouseX
=
e.clientX
-
(mainDivObj.style.left.replace(
"
px
"
,
""
)
-
0
);

                
var
 mouseY
=
e.clientY
-
(mainDivObj.style.top.replace(
"
px
"
,
""
)
-
0
);

                

                window.status
=
mouseX
+
"
    
"
+
mouseY;



                zoomDivObj.style.left
=
mouseX
-
(w
/
2)+"px";



                zoomDivObj.style.top
=
mouseY
-
(h
/
2)+"px";





                
if
(showDivObj
==
null
)

                    createShowDivObj();

                

                showDivObj.style.backgroundPosition
=
(
-
mouseX
+
w
/
2)*zoomMultiple+"px "+(-mouseY+h
/
2
)
*
zoomMultiple
+
"
px
"
;

            }



            
function
 hiddenZoomDiv()

            {

                
if
(zoomDivObj
==
null
)

                    createZoomDivObj();



                
//
zoomDivObj.style.visibility="hidden";



            }



            
function
 createZoomDivObj()

            {

                zoomDivObj
=
document.getElementById(
"
zoom_div_id
"
);

            }



            
function
 createMainDivObj()

            {

                mainDivObj
=
document.getElementById(
"
main_div_id
"
);

            }



            
function
 createShowDivObj()

            {

                showDivObj
=
document.getElementById(
"
show_div_id
"
);

            }



            
function
 createImgObj()

            {

                imgObj
=
document.getElementById(
"
img_id
"
);

            }

        
<
/
script>



    
<
/
head>



    
<
body onmousemove
=
"
moveZoomDiv(event)
"
 onload
=
"
load()
"
>


        
<
div id
=
"
main_div_id
"
 style
=
"
position:absolute;overflow:hidden;background-color:cyan;border:gray solid 1px;
"
 onmouseover
=
"
showZoomDiv()
"
 onmouseout
=
"
hiddenZoomDiv()
"
 
>


            
<
img id
=
"
img_id
"
>




            
<
div id
=
"
zoom_div_id
"
 style
=
"
position:absolute;left:0px;top:0px;overflow:hidden;visibility:hidden;
"
><
/
div>



        
<
/
div>





        
<
div id
=
"
show_div_id
"
 style
=
"
position:absolute;overflow:hidden;background-color:cyan;background-repeat:no-repeat;border:gray solid 1px;
"
 
><
/
div>



    
<
/
body>



<
/
html>