javascript 放大镜(学习至CSDN论坛)

来源：互联网发布：海岛导弹升级数据编辑：程序博客网时间：2024/05/22 13:58

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