页面放大镜实现方法- 天山飞猫之家- 博客大巴企业库|免费b2b网站

：转载时请以超链接形式标明文章原始出处和作者信息及

首先，说一下原理：

放大镜效果的实现其实是通过overflow属性，在缩略图的旁边显示原图的某个区域。
通过判定鼠标在缩略图中的位置，动态改变原图的margin值来实现移动放大镜的效果。

其次，说明一下其实HTML标签是支持圆形的div的（IE6除外）
IE6果然是阻碍HTML发展的巨大障碍啊~！

{zh1}，show一下自己写的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>fangdajing</title>
        <script type="text/javascript">
            var getCoordInDocumentExample = function(){
                var coords = document.getElementById("bbb");
    coords.onmouseout=function(){document.getElementById("fadakuang").style.display="none";}
                coords.onmousemove = function(e){
                    var pointer = getCoordInDocument(e);
                    var coord = document.getElementById("fada");
     var realX=100-pointer.x*1280/400;
     var realY=100-pointer.y*800/250;
     coord.style.margin=realY+" 0 0 "+realX;
     document.getElementById("fadakuang").style.display="block";
                }
            }
            var getCoordInDocument = function(e){
                e = e || window.event;
                var x = e.pageX ||
                (e.clientX +
                (document.documentElement.scrollLeft ||
                document.body.scrollLeft));
                var y = e.pageY ||
                (e.clientY +
                (document.documentElement.scrollTop ||
                document.body.scrollTop));
                return {
                    'x': x,
                    'y': y
                };
            }
            window.onload = function(){
                getCoordInDocumentExample();
            };
        </script>
    </head>
    <body>
        <div id="bbb" style="width:400px;height:250px;float:left;">
            <img src="aaa.jpg" height="250px" width="400px" style="cursor:crosshair;">
        </div>
        <div id="detail" style="float:left;margin:20px;">
            <table>
                <tr>
                    <td>
                        x=<span id="showX"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        y=<span id="showY"></span>
                    </td>
                </tr>
            </table>
            <div id="fadakuang" style="width:200px;height:200px;overflow:hidden;display:none;">
                <img id="fada" src="aaa.jpg" width="1280px" height="800px">
            </div>
        </div>
    </body>
</html>