Javascript放大镜代码
兼容性还行IE,FireFox,google chrome均正常。
效果还可以，代码如下：
url:http://greatverve.cnblogs.com/archive/2011/07/27/js-zoom.html
源码下载：https://files.cnblogs.com/greatverve/js-zoom.rar
效果还可以，代码如下：
<!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>
<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>
源码下载：https://files.cnblogs.com/greatverve/js-zoom.rar
我这个博客废弃不用了，今天想寻找外链的时候，突然想到这个博客权重很高。
有需要免费外链的，留言即可，我准备把这个博客变成免费的友情链接站点。
