<!DOCTYPE html>
<html>
<head>
<title>放大镜效果显示</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="https://code.jquery.com/jquery.js"></script>
<style type="text/css">
#demo {display: block; 410px;height: 385px;position: relative;}
#small-box {position: relative;z-index: 1;}
#small-box img { 400px;height: 385px;}
#float-box {display: none; 160px;height: 120px;position: absolute;background-size: #ffffcc;border:1px solid #ccc;filter:alpha(opacity=50);opacity: 50;cursor: move;}
#big-box {display: none;position: absolute;top:0px;left: 460px; 400px;height: 400px;overflow: hidden;border:1px solid #ccc;z-index: 1;}
#big-box img {position: absolute;z-index: 5;}
#mark {position: absolute;display: block; 400px;height: 385px;z-index: 10;cursor: move;background:#fff;filter:alpha(opacity:0); opacity:0;}
</style>
<script type="text/javascript">
$(document).ready(function(){
// 放大镜效果
var objDemo=document.getElementById("demo");
var objSmallBox=document.getElementById("small-box");
var objFloatBox=document.getElementById("float-box");
var objBigBox=document.getElementById("big-box");
var objBigBoxImage=document.getElementById("img1");
var objMark=document.getElementById("mark");
objMark.onmouseover=function() {
objFloatBox.style.display="block";
objBigBox.style.display="block";
}
objMark.onmouseout=function() {
objFloatBox.style.display="none";
objBigBox.style.display="none";
}
objMark.onmousemove=function(ev) {
var _event=ev || window.event;
var left=_event.pageX-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2 || _event.clientX +document.documentElement. scrollLeft-document.documentElement.clientLeft-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2;
var top=_event.pageY-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2 || _event.clientY +document.documentElement. scrollTop-document.documentElement.clientTop-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2 ;
if(left<0) {
left=0;
} else if (left>(objMark.offsetWidth-objFloatBox.offsetWidth)) {
left=objMark.offsetWidth-objFloatBox.offsetWidth;
}
if (top<0) {
top=0;
} else if (top>(objMark.offsetHeight-objFloatBox.offsetHeight)) {
top=objMark.offsetHeight-objFloatBox.offsetHeight;
}
objFloatBox.style.left=left+"px";
objFloatBox.style.top=top+"px";
var parcentX=left / (objMark.offsetWidth-objFloatBox.offsetWidth);
var parcentY=top / (objMark.offsetHeight-objFloatBox.offsetHeight);
objBigBoxImage.style.left=-parcentX*(objBigBoxImage.offsetWidth-objBigBox.offsetWidth)+"px";
objBigBoxImage.style.top=-parcentY*(objBigBoxImage.offsetHeight-objBigBox.offsetHeight)+"px";
}
})
</script>
</head>
<body>
<div id="demo">
<div class="bigPic" id="small-box">
<div id="mark"></div>
<div id="float-box"></div>
<img src="image/1.jpg">
</div>
<div class="bigPic-p" id="big-box">
<img src="image/54.png" id="img1">
</div>
</div>
</body>
</html>