<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{padding:0; margin:0;}
#main{margin:20px;}
.smallPic{ 202px; height:202px; border:1px #b7b7b7 solid; text-align:center; float:left; margin-right:5px; position:relative;}
.smallPic img { position:absolute; left: 1px; top:1px;}
.smallPic .mouse{ 50px; height:50px; position:absolute; z-index: 5; left:1px; top:1px; border:1px solid #ccc; display:none;-moz-opacity: 0.8; background:#fff; opacity:.80; filter: alpha(opacity=80);}
.bigPic{ 302px; height:302px; border:1px solid #b7b7b7; text-align:center; float:left; display:; overflow:hidden; position:relative;}
.bigPic img{ position:absolute; left:0; top:0px;}
</style>
<script type="text/javascript">
window.onload = function (){
var magnifier = function (){
this.main = document.getElementById("main");
this.smallDiv = this.main.getElementsByTagName("div")[0];
this.mouseBlock = this.smallDiv.getElementsByTagName("p")[0];
this.bigDiv = this.main.getElementsByTagName("div")[1];
this.smallPic = this.smallDiv.getElementsByTagName("img")[0];
this.bigPic = this.bigDiv.getElementsByTagName("img")[0];
this.displayBigPic();
}
magnifier.prototype = {
displayBigPic : function (){
var _this = this;
this.smallDiv.onmouseover = function (ev){
var oEvent = ev || event;
_this.bigDiv.style.display = "block";
_this.mouseBlock.style.display = "block";
var l = oEvent.clientX - _this.mouseBlock.offsetWidth / 2 - _this.main.offsetLeft;
var t = oEvent.clientY - _this.mouseBlock.offsetHeight / 2 - _this.main.offsetTop;
if(l < 0){
l = 0;
}else if(l > _this.smallDiv.offsetWidth - _this.mouseBlock.offsetWidth){
l = _this.smallDiv.offsetWidth - _this.mouseBlock.offsetWidth;
}
if(t < 0){
t = 0;
}else if(t > _this.smallDiv.offsetHeight - _this.mouseBlock.offsetHeight - 1){
t = _this.smallDiv.offsetHeight - _this.mouseBlock.offsetHeight -1;
}
_this.mouseBlock.style.left = l + "px";
_this.mouseBlock.style.top = t + "px";
_this.bigPic.style.left = - l + "px";
_this.bigPic.style.top = - t + "px";
}
this.smallDiv.onmouseout = function (){
_this.bigDiv.style.display = "none";
_this.mouseBlock.style.display = "none";
}
},
}
var a = new magnifier();
}
</script>
</head>
<body>
<div id="main">
<div class="smallPic">
<p class="mouse"></p>
<img src="images/small.png" />
</div>
<div class="bigPic">
<img src="images/big.png" />
</div>
</div>
</body>
</html>
- 本来想着要算一下比例的，可能这个比较特殊不用吧。囧。。。