Javascript放大镜代码

兼容性还行IE,FireFox,google 
chrome均正常。

效果还可以，代码如下：
<!docutype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>http://www.cnblogs.com/greatverve</title>
    <style type="text/css">
    body {background:#f6f6e7;font: normal 14px/1.4em YaHeiConsolas,"Microsoft YaHei",Georgia, "Times New Roman", Times, serif;width:980px;margin:20px auto}
    h1 {color:#4f3c00;font: 28px/2em YaHeiConsolas,"Microsoft YaHei",Georgia, "Times New Roman", Times, serif }
    h2 {color:#4f3c00;font: 22px/1.5em YaHeiConsolas,"Microsoft YaHei",Georgia, "Times New Roman", Times, serif }
    #smallImgCon {position:relative;left:0;top:0;}
    #magnifierCon {height:276px;width:276px;position:absolute;overflow:hidden;z-index:3}
        #magnifierCon img#magnifierBg {position:absolute;z-index:2}
        #magnifierCon img#largeImg {position:absolute;z-index:1}
    </style>
</head>
<body>
    <h1>大气象 实例演示</h1>
    <h2>放大镜</h2>
    <div onMouseMove="imgZoomOut(event)" id="smallImgCon">
        <img src="airport_small_1.jpg" id="smallImg"/>    
        <div id="magnifierCon" style="display:none">
            <img src="magnifier.png" id="magnifierBg"/>
            <img src="airport_large_1.jpg" id="largeImg"/>    
        </div>
    </div>
    
    <script type="text/javascript">
    
    var smallImgCon = document.getElementById("smallImgCon");
    var smallImg = document.getElementById("smallImg");
    var magnifierCon = document.getElementById("magnifierCon");
    var magnifierBg = document.getElementById("magnifierBg");
    var largeImg = document.getElementById("largeImg");
    
    function getImageSize(imageEl) {
        var i = new Image();
        i.src = imageEl.src;
        return new Array(i.width, i.height);
    }
    
    function imgZoomOut(event) {
        magnifierCon.style.display = "block";
        smallImgConLocationX = smallImgCon.offsetLeft;//得到小图片X坐标
        smallImgConLocationY = smallImgCon.offsetTop;//得到小图片Y坐标
        
        x = event.clientX - smallImgConLocationX;//光标相对小图片左上角X坐标
        y = event.clientY - smallImgConLocationY;//光标相对小图片左上角Y坐标
        
        var smallSize = getImageSize(smallImg);
        smallImgWidth = smallSize[0];
        smallImgHeight = smallSize[1];
        
        var largeSize = getImageSize(largeImg);
        largeImgWidth = largeSize[0];
        largeImgHeight = largeSize[1];
        
        var magnifierSize = getImageSize(magnifierBg);
        magnifierWidth = magnifierSize[0];
        magnifierHeight = magnifierSize[1];
        
        
        if ( x < 0 || x > smallImgWidth || y < 0 || y > smallImgHeight) {
            dispear();
        }else {
            magnifierCon.style.left = x - magnifierWidth/2 + "px";//放大镜X坐标
            magnifierCon.style.top = y - magnifierHeight/2 + "px";//放大镜Y坐标
        
            x = - x*(largeImgWidth/smallImgWidth) + magnifierWidth/2;
            y = - y*(largeImgWidth/smallImgWidth) + magnifierHeight/2;
                        
            largeImg.style.left = x + "px";
            largeImg.style.top = y + "px";
        
        }
        
    }
    function dispear() {
        magnifierCon.style.display = "none";
    }
    </script>
</body>
</html>
url:http://greatverve.cnblogs.com/archive/2011/07/27/js-zoom.html
源码下载：https://files.cnblogs.com/greatverve/js-zoom.rar
posted @ 2011-07-27 10:41  大气象  阅读(1452)  评论(5)    收藏  举报
http://www.tianqiweiqi.com