Javascript放大镜代码_.NET学习网|ASP.NET教程|ASP.NET MVC|ASP.NET 源码|VS2010教程|ASP.NET视频教程|vs2010中文旗舰版下载

兼容性还行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>

js-zoom.rar

JS里改backgroundImage	JavaScript函数
JavaScript仿淘宝智能浮动	Javascript弹出窗口总结
js脚本实现四舍五入的函数	javascript表单之间的数据传递
JavaScript之swapNode	封装JS和CSS文件为服务器端控件
JS调用WebService无刷新获得在线消息	利用js脚本控制2个文本框
JavaScript重构（一）：模块划分和命名空间	JavaScript函数this调用规则
js实现点中子节点父节点自动选中	颜色代码选择器
设为首页\|加入收藏代码	javascript判断单选框
javascript动态创建表格：新增、删除行和列	js图片切换幻灯效果

CRM客户关系管理系统源码	快速查询ICP备案号的VB.Net源码
Silverlight实现的在线头像截取功能	Asp.net修正版eWebEditor源码
慧摩森电子系统技术公司整站(.Net+ACCESS)	i-favourite3.0Build多用户博客系统免安装版源码
医院门诊管理系统源码	Tab可切换皮肤的后台模板
isRoc个人内容管理系统简约iPlaySoft皮肤	淄博某泵业网站源码
C#使用DataBinding、DataView进行数据绑定一些实例	基于SQLite开发的数据库示例
Winform企业综合人事管理系统	Asp.net简单多用户Blog程序源码

.NET学习网|ASP.NET教程|ASP.NET MVC|ASP.NET 源码|VS2010教程|ASP.NET视频教程|vs2010中文旗舰版下载

热门标签

Javascript放大镜代码

Tags：