当前位置 :首页 > JavaScript

一个JavaScript放大镜的特效

一个JavaScript放大镜的特效 ZDNet软件频道时间：2009-12-15作者：csdn | csdn 本文关键词：问答 asp.net 一个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">            <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> 订阅上一篇: Windows控件应用于ASP.net的权限问题下一篇:自己写了个(javascript)贪吃蛇游戏您看到此篇文章时的感受是：支持愤怒无聊暴汗养眼炒作不解标题党搞笑问答的相关文章 asp.net的相关文章今日推荐阅读： QQ2009软件实用技巧美图秀秀软件实用技巧可牛软件实用技巧 PhotoShop软件实用作图技巧最受关注的文章：最新更新文章：用户评论评论列表本篇文章共有 0 条评论用户名评论内容发表时间 - 发表评论 - 匿名注册用户向ZDNet提问用户名：密码： document.getElementById('referer').value = window.location.href; document.getElementsByName('anonymous')[0].checked = true; ");//]]>--> 头条文章更多 » 视频更多 » 重磅专题报道更多 » 最新博客报道 Teched2009 大会第2天随笔Windows 7 发布会有感：Windows 7 可小用难担下周2应邀去微软参加1VS1 虚拟化特训yahoo与微软签订10年搜索协议意味退出搜索市场北塔软件解读BSM:国内IT运维处于早期阶段7月22日北京日全食图iphone版（1P）当心,Web版office 微软握有成功机会融合BEA ,Oracle中间件11g新架构“CIOBOB”亮chrome OS！ Google拥有了接入互联网的入口Twitter证明算法还不能有效过滤信息更多 » 最新问答中心帖子杀毒软件的问题智能学英语，苹果iTunes技术惊现名人活词典i53买手机的朋友不看别后悔求一条更新SQL语句mysql如何统计字段长度sql查询语句求救啊点查询的时候，默认显示所有记录杨乐乐爆正计划和汪涵造人传其是舞林内定冠军通过jdbc执行sql比在plsql中慢好多oracle 触发器更多 » 订阅 RSS 频道每日头条频道每日更新文章频道最新视频节目频道技术产品资讯软件技术文档频道最新专题热门标签 ApacheExcel手机软件软件技术云图3 软件技术云图2软件技术云1ASP.NETJavaEE|J2ee网页挂马Word搜狗拼音千千静听PPliveVeryCD电驴完美卸载2009软件officefirefoxP2P路由器TCP/IPOSPF|路由协议WI-FIADSLQQ2009风行UUSeephotoshop奇虎360迅雷5(Thunder)大智慧专区可牛影像美图秀秀酷狗音乐Chrome OSCSSVB.netC#WindowsLinuxMySQLOracleDB2SQL ServerjavaXMLC++PHPASPVisual Studio

上一篇： ASP.NET开发者的JavaScript：构建函数下一篇：下面没有链接了

相关焦点：

本栏热点