<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜效果</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #ccc;
}
#outer {
width: 1200px;
margin: 100px auto 0;
overflow: hidden;
padding: 10px;
position: relative;
}
#minbox {
float: left;
width: 350px;
height: 350px;
/*border: 1px solid red;*/
position: relative;
}
#minbox img {
width: 350px;
height: 350px;
}
#minbox #shadow {
height: 175px;
width: 175px;
background: yellow;
opacity: 0.4;
filter: alpha(opacity = 40);
position: absolute;
left: 0;
top: 0;
display: none;
}
#maxbox {
height: 400px;
width: 400px;
overflow: hidden;
position: absolute;
left: 370px;
top: 20px;
/*border: 2px solid blue;*/
display: none;
}
#maxbox img {
height: 800px;
width: 800px;
position: absolute;
left: 0;
top: 0;
}
#con {
float: left;
margin-left: 20px;
}
</style>
</head>
<body>
<div id="outer">
<div id="minbox">
<img src="images/min.jpg" >
<p id="shadow"></p>
</div>
<div id="maxbox">
<img src="images/max.jpg" >
</div>
<div id="con">
<img src="images/msg.png" >
</div>
</div>
<script>
var $ = function(id) {
return document.getElementById(id);
}
//获取元素到body的距离函数
function offsetTL(obj) {
var l = 0, t = 0;
while(obj) {
l = l + obj.offsetLeft + obj.clientLeft;
t = t + obj.offsetTop + obj.clientTop;
obj = obj.offsetParent;
}
return {left: l, top: t}
}
console.log(offsetTL($(‘minbox‘)).left);
var minImg = $(‘minbox‘).getElementsByTagName(‘img‘)[0];
var maxImg = $(‘maxbox‘).getElementsByTagName(‘img‘)[0];
// console.log(maxImg);
$(‘minbox‘).onmousemove = function(e) {
var e = e || window.event;
$(‘shadow‘).style.display = ‘block‘;
$(‘maxbox‘).style.display = ‘block‘;
var movel = (e.clientX - offsetTL($(‘minbox‘)).left - $(‘shadow‘).offsetWidth/2);
var movet = (e.clientY - offsetTL($(‘minbox‘)).top - $(‘shadow‘).offsetHeight/2);
if (movel <= 0) {
movel = 0;
}else if(movel >= $(‘minbox‘).clientWidth - $(‘shadow‘).offsetWidth) {
movel = $(‘minbox‘).clientWidth - $(‘shadow‘).offsetWidth;
}
if (movet <= 0) {
movet = 0;
}else if(movet >= $(‘minbox‘).clientHeight - $(‘shadow‘).offsetHeight) {
movet = $(‘minbox‘).clientHeight - $(‘shadow‘).offsetHeight;
}
$(‘shadow‘).style.left = movel + ‘px‘;
$(‘shadow‘).style.top = movet + ‘px‘;
var scale = maxImg.offsetWidth/minImg.offsetWidth;
maxImg.style.left = -movel * scale + ‘px‘;
maxImg.style.top = -movet * scale + ‘px‘;
}
$(‘minbox‘).onmouseout = function() {
$(‘shadow‘).style.display = ‘none‘;
$(‘maxbox‘).style.display = ‘none‘;
}
</script>
</body>
</html>
原文：http://www.cnblogs.com/handsomehan/p/5859105.html