<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style type="text/css">
*{margin:0;padding:0;}
.container{width: 200px;height: 200px;padding: 5px;border:1px solid #CCC;position: relative;left: 50px;top: 50px;}
.container .small_pic{width: 200px;height: 200px;background: #ccc;position: relative;}
.container .float_layer{width: 50px;height: 50px;border:1px solid #000;background: #fff;filter:alpha(opacity: 30);opacity: 0.3;position: absolute;top: 0;left: 0;z-index: 1;display: none;}
.container .mask{width: 100%;height: 100%;position: absolute;z-index: 2;left: 0;top: 0;background: red;filter:alpha(opacity: 0);opacity: 0;}
.container .big_pic{position: absolute;top: -1px;left: 215px;width: 250px;height: 250px;overflow: hidden;display: none;border:2px solid #ccc;}
.container img{position: absolute;top: 0;left: 0;}
</style>
</head>
<body>
<div class="container" id="div1">
<div class="small_pic">
<span class="mask"></span>
<span class="float_layer"></span>
<img src="http://b.hiphotos.baidu.com/image/w%3D310/sign=6c8629c441540923aa69657fa259d1dc/b812c8fcc3cec3fd1d347092de88d43f869427cb.jpg" />
</div>
<div class="big_pic">
<img src="http://a.hiphotos.baidu.com/image/w%3D310/sign=c53e905c4f10b912bfc1f0fff3fcfcb5/83025aafa40f4bfbf3c249b30b4f78f0f63618c2.jpg" />
</div>
</div>
<script type="text/javascript">
var util = { //获取类名
getByClass : function(oParent,oClass){
var oEle = oParent.getElementsByTagName('*');
var oTemp = [];
for(var i = 0 ; i < oEle.length ; i++){
if(oEle[i].className == oClass){
oTemp.push(oEle[i]);
}
}
return oTemp;
}
}
window.onload = function(){
var oDiv = document.getElementById('div1');
var oMask = util.getByClass(oDiv,'mask')[0];
var oFloat = util.getByClass(oDiv,'float_layer')[0];
var oBig = util.getByClass(oDiv,'big_pic')[0];
var oSamll = util.getByClass(oDiv,'small_pic')[0];
var oImg = oBig.getElementsByTagName('img')[0];
oMask.onmouseover = function(){
oFloat.style.display = "block";
oBig.style.display = "block";
}
oMask.onmouseout = function(){
oFloat.style.display = "none";
oBig.style.display = "none";
}
oMask.onmousemove = function(e){
var e = e || window.event;
var oLeft = e.clientX - oDiv.offsetLeft - oSamll.offsetLeft - oFloat.offsetWidth / 2; //灰色遮罩层偏移量
var oTop = e.clientY - oDiv.offsetTop - oSamll.offsetTop - oFloat.offsetHeight / 2;
if(oLeft < 0){ //边缘判断
oLeft = 0;
}else if(oLeft > oMask.offsetWidth - oFloat.offsetWidth){
oLeft = oMask.offsetWidth - oFloat.offsetWidth;
}
if(oTop < 0){
oTop = 0;
}else if(oTop > oMask.offsetHeight - oFloat.offsetHeight){
oTop = oMask.offsetHeight - oFloat.offsetHeight;
}
oFloat.style.left = oLeft + 'px';
oFloat.style.top = oTop + 'px';
var oPercentX = oLeft / (oMask.offsetWidth - oFloat.offsetWidth); //两图比例计算
var oPercentY = oTop / (oMask.offsetHeight - oFloat.offsetHeight);
oImg.style.left = -oPercentX * (oImg.offsetWidth - oBig.offsetWidth) + 'px'; //最终大图所处位置
oImg.style.top = -oPercentY * (oImg.offsetHeight - oBig.offsetHeight) + 'px';
}
}
</script>
</body>
</html>
可复制下来直接使用
比较简单放大镜效果
posted on
