内容摘要：实现原理，一个层显示小图，另一个层加载大图并默认隐藏，在小图层上面加鼠标动作感应显示大图
实现原理，一个层显示小图，另一个层加载大图并默认隐藏，在小图层上面加鼠标动作感应显示大图
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片放大镜示例 solgle.com</title>
<style type="text/css">
body {
margin:0px;
padding:0px;
}
.box {
width:434px;
height:292px;
margin:10px auto;
}
.left {
width:202px;
height:130px;
float:left;
padding:2px;
position:relative;
border:3px solid #ccc;
}
.left img {
float:left;
border:1px solid #7b7b7b;
}
.left .move {
width:50px;
height:50px;
background:#666;
opacity:0.3;
top:3px;
left:3px;
position:absolute;
z-index:1;
display:none;
filter: alpha(opacity: 30);
border:1px solid #000;
}
.left .mask {
width:100%;
height:100%;
opacity:0;
top:0px;
left:0px;
position:absolute;
z-index:2;
background:#000;
cursor:move;
filter:alpha(opacity: 0);
}
.right {
width:519px;
height:365px;
float:left;
padding:2px;
overflow:hidden;
display:inline;
position:relative;
margin:0 0 0 10px;
display:none;
border:3px solid #ccc;
}
.right img {
position:absolute;
top:0px;
left:0px;
}
</style>
<script type="text/javascript">
//获取id
function $(id){
return typeof id === "string" ? document.getElementById(id) : id;
}
//获取tagName
function $$(oParent, elem){
return (oParent || document).getElementsByTagName(elem);
}
//获取className
function $$$(oParent, sClass){
var aElem = $$(oParent, '*');
var aClass = [];
var i = 0;
for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
return aClass;
}
//初始化对象
function magnifier(){
this.initialize.apply(this, arguments);
}
magnifier.prototype = {
initialize : function(){
var _this = this;
if($('box')){
this.oBox = $('box');
this.oLeft = $$$(this.oBox, 'left')[0];
this.oMove = $$$(this.oBox, 'move')[0];
this.oMask = $$$(this.oBox, 'mask')[0];
this.oLimg = $$(this.oLeft, 'img')[0];
this.oRight = $$$(this.oBox, 'right')[0];
this.oRimg = $$(this.oRight, 'img')[0];
this.oMask.onmouseover = function(){
_this.mouseover();
};
this.oMask.onmousemove = function(e){
_this.mousemove(e);
};
this.oMask.onmouseout = function(){
_this.mouseout();
};
}
},
mouseover : function(){
this.oMove.style.display = 'block';
this.oRight.style.display = 'block';
},
mousemove : function(e){
this.oEvent = e || event;
this.left = (this.oEvent.clientX - this.oBox.offsetLeft) - this.oMove.offsetWidth / 2;
this.top = (this.oEvent.clientY - this.oBox.offsetTop) - this.oMove.offsetHeight / 2;
this.margin();
this.oMove.style.left = this.left + 'px';
this.oMove.style.top = this.top + 'px';
this.bigImg();
},
mouseout : function(){
this.oMove.style.display = 'none';
this.oRight.style.display = 'none';
},
margin : function(){
this.marightW = this.oMask.offsetWidth - this.oMove.offsetWidth;
this.marightH = this.oMask.offsetHeight - this.oMove.offsetHeight;
if(this.left < 3){
this.left = 3;
}else if(this.left > this.marightW - 3){
this.left = this.marightW - 3;
}
if(this.top < 3){
this.top = 3;
}else if(this.top > this.marightH - 3){
this.top = this.marightH - 3;
}
},
bigImg : function(){
this.bigW = this.oMask.offsetWidth - this.oMove.offsetWidth;
this.bigH = this.oMask.offsetHeight - this.oMove.offsetHeight;
this.bigX = this.left / (this.bigW);
this.bigY = this.top / (this.bigH);
this.oRimg.style.left = -this.bigX * (this.bigW) +'px'
this.oRimg.style.top = -this.bigY * (this.bigH) +'px'
}
};
</script>
<script type="text/javascript">
window.onload = function(){
new magnifier();
};
</script>
</head>
<body>
<div class="box" id="box">
<div class="left">
<span class="move"></span>
<span class="mask"></span>
<!-- 小图片 默认显示 -->
<img src="HTTP://www.solgle.com/upFiles/infoImg/thumb_2013052749691449.jpg" />
</div>
<div class="right">
<!-- 大图片 默认隐藏 -->
<img src="HTTP://www.solgle.com/upFiles/infoImg/2013052749691449.jpg" /></div>
</div>
</body>
</html>
