<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 400px;
height: 400px;
margin: 20px;
background-color: #ccc;
border: 5px solid green;
position: relative;
cursor: pointer;
}
#mask{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background-color: #FFF;
z-index: 2;
}
#img1{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#img2{
width: 600px;
height: 600px;
position: absolute;
top: 0px;
left: 0px;
}
#floatlay{
width: 100px;
height: 100px;
background-color: red;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
display: none;
}
#imgbox2{
width: 400px;
height: 400px;
background-color: #ccc;
position: absolute;
top: -5px;
left: 410px;
border: solid green 5px;
overflow: hidden;
display: none;
}
</style>
</head>
<body>
<div id="box">
<img id="img1" src="imgRoll/o1.jpg"/>
<div id="mask">
</div>
<div id="floatlay">
</div>
<div id="imgbox2">
<img id="img2" src="imgRoll/bo1.jpg"/>
</div>
</div>
<script type="text/javascript">
var mask = document.getElementById("mask");
var floatlay = document.getElementById("floatlay");
var box2 = document.getElementById("imgbox2");
var img2 =document.getElementById("img2");
mask.onmousemove = function(event){
var screenx = event.screenX;
var screeny = event.screenY;
var clientx = event.clientX;
var clienty = event.clientY;
var pagex = event.pageX;
var pagey = event.pageY;
var offsetx = event.offsetX;
var offsety = event.offsetY;
var layerx = event.layerX;
var layery = event.layerY;
/*console.log("screenx:"+screenx);
console.log("clientx:"+clientx);
console.log("pagex:"+pagex);
console.log("offsetx:"+offsetx);
console.log("layerx:"+layerx);
console.log("screeny:"+screeny);
console.log("clienty:"+clienty);
console.log("pagey:"+pagey);
console.log("offsety:"+offsety);
console.log("layery:"+layery);*/
// console.log("offsetx:"+offsetx);
// console.log("offsety:"+offsety);
var x = offsetx - 50 ;
var y = offsety - 50 ;
//判断重新计算
if(x<0) {x = 0;}
if(x>300){x = 300}
if(y<0) {y=0;}
if(y>300){y = 300}
floatlay.style.left = x + 'px';
floatlay.style.top = y + 'px';
//计算百分比
var prex = x/300;
var prey = y/300;
var x1 = - prex*200;
var y1 = - prey*200;
img2.style.left = x1 + 'px';
img2.style.top = y1 + 'px';
};
mask.onmouseout= function(){
floatlay.style.display = 'none';
box2.style.display = 'none';
};
mask.onmouseover= function(){
floatlay.style.display = 'block';
box2.style.display = 'block';
};
</script>
</body>
</html>
