JavaScript放大镜的特效代码展示-控件新闻-慧都网

JavaScript放大镜的特效代码展示

原创|其它|编辑：郝浩|2009-10-09 13:58:38.000|阅读 676 次

概述：本文展示了JavaScript放大镜的特效的代码。

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

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：IT专家网

上一篇：Hibernate中load和get的区别介绍下一篇：如何启动Java应用的Shell脚本