<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {
width: 180px;
height: 180px;
overflow: hidden;
position: relative;
}
#div1 img {
width: 180px;
height: 180px;
}
#div1 span {
width: 100px;
height: 100px;
background: yellow;
opacity: 0.5;
filter: alpha(opacity=50);
position: absolute;
left: 0;
top: 0;
display: none;
}
#mark {
width: 180px;
height: 180px;
background: red;
position: absolute;
left: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
}
#div2 {
width: 500px;
height: 500px;
position: absolute;
left: 250px;
top: 50px;
overflow: hidden;
display: none;
}
#div2 img {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="div1">
<img src="b1.jpg">
<span></span>
<div id="mark"></div>
</div>
<div id="div2">
<img src="b1.jpg">
</div>
</body>
<script>
var div1;
var div2;
var span;
var imgBig;
function myInit(){
div1=document.getElementById("div1");
div2=document.getElementById("div2");
span=document.getElementsByTagName("span")[0];
imgBig=div2.getElementsByTagName("img")[0];
div1.addEventListener("mouseenter",function(){
span.style.display="block";
div2.style.display="block";
});
div1.addEventListener("mouseout",function(){
span.style.display="none";
div2.style.display="none";
});
div1.addEventListener("mousemove",function(){
var ev=window.event;
var x=ev.clientX;
var y=ev.clientY;
x=x-div1.offsetLeft;
y=y-div1.offsetTop;
console.log("x:"+x+"------"+"y"+y);
x=x-Math.floor(span.offsetWidth/2);
y=y-Math.floor(span.offsetHeight/2);
var spanMoveMaxX=div1.offsetWidth-span.offsetWidth;
var spanMoveMaxY=div1.offsetHeight-span.offsetHeight;
if(x<0){
x=0;
}else if(x>(spanMoveMaxX)){
x=(spanMoveMaxX);
}
if(y<0){
y=0;
}else if(y>(spanMoveMaxY)){
y=(spanMoveMaxY);
}
span.style.top=y+"px";
span.style.left=x+"px";
var perX=x/spanMoveMaxX;
var perY=y/spanMoveMaxY;
moveBigImg(perX,perY);
});
}
function moveBigImg(xPer,yPer){
var maxX=imgBig.width-div2.offsetWidth;
var maxY=imgBig.height-div2.offsetHeight;
var x=Math.floor(maxX*xPer);
var y=Math.floor(maxY*yPer);
imgBig.style.top=-y+"px";
imgBig.style.left=-x+"px";
}
window.onload=myInit;
</script>
</html>