</>code
<!
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>