JavaScript实现放大镜效果

原理：

　　鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置，定位大图片的相应位置；

　　遮罩层（放大镜）如何移动，大图片反方向对应倍数移动

主要涉及三个事件:

　　鼠标移入 ：显示遮罩层和大图区域

　　鼠标移出 ：隐藏遮罩层和大图区域

　　鼠标移动

该案例使用的图片分辨率大小是1440*900

HTML：

    　　<!-- 左边的小图片 -->
        <div id="small">
            <img src="img/dog.jpg" />
            <!-- 遮罩层（放大镜） -->
            <div id="mark"></div>
        </div>
        <!-- 右边的大图区域 -->
        <div id="big">
            <img src="img/dog.jpg" />
        </div>    

CSS：

　　<style>
        #small{width: 360px;height: 225px; /*宽高等于 原图/4*/
            position: absolute;left: 100px;top:50px}
        #small img{width: 100%; height: 100%;}
        #mark{width: 100px;height: 100px;background-color: white;
            opacity: 0.5;/*遮罩层半透明*/
            filter: alpha(opacity=50); /*兼容不同的浏览器*/
            position: absolute;
            left: 0px;top: 0px;}
        #big{display:none;width: 400px;height: 400px;border: 1px solid black; left:500px;top: 50px;position: absolute;overflow: hidden;}
        #big img{width: 1440px; height: 900px;/*宽高等于 原图大小*/
        position: absolute;left: 0px;top: 0px;}
    </style>

JS:

　　　　<script>
            window.onload= function(){
                var oSmall = document.getElementById("small");
                var oBig = document.getElementById("big");
                var oMark = document.getElementById("mark");
                var oBigImg = oBig.getElementsByTagName("img")[0];
                
                //鼠标移入小图时，显示遮罩层和放大图区域
                oSmall.onmouseover = function(){
                    oMark.style.display = 'block';
                    oBig.style.display = 'block';
                }
                //鼠标移出小图时，隐藏遮罩层和放大图区域
                oSmall.onmouseout = function(){
                    oMark.style.display = 'none';
                    oBig.style.display = 'none';
                }
                oSmall.onmousemove = function(ev){
                    var e = ev||window.event;
                    //计算鼠标位置，让鼠标悬停在遮罩层中间
                    var l = e.clientX - oSmall.offsetLeft-50;
                    var t = e.clientY - oSmall.offsetTop -50;
                    //不允许遮罩层出界
                    if(l<=0){l =0;}
                    if(l>=360-100){l = 260;}
                    if(t<=0){t=0;}
                    if(t>=225-100){t=125;}
                    oMark.style.left = l+ 'px';
                    oMark.style.top =t + 'px';
                    
                    //左边遮罩层如何移动，右边图片反方向对应倍数移动
                    oBigImg.style.left = l*-4+'px';
                    oBigImg.style.top = t*-4+'px';
                }
            }
        </script>

效果：