效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 350px;
height: 350px;
margin:100px;
border:1px solid #000;
position:relative;
}
#small{
width: 350px;
height: 350px;
}
#mask{
display:none;
width: 175px;
height: 175px;
background-color: rgba(255, 165, 0, 0.33);
position:absolute;
left:0;
top:0;
}
#big{
display: none;
width: 400px;
height: 400px;
position:absolute;
top:0;
left:360px;
border:1px solid #000;
overflow:hidden;
}
</style>
</head>
<body>
<div id="box">
<div id="small">
<img src="image/001.jpg" id="smallimg" alt="">
<div id="mask"></div>
</div>
<div id="big">
<img src="image/0001.jpg" id="bigimg" alt="">
</div>
</div>
<script>
var box=document.getElementById("box");
var small=document.getElementById("small");
var smallImg=small.children[0];
var mask=small.children[1];
var big=document.getElementById("big");
var bigImg=big.children[0];
box.onmouseenter=function(){
mask.style.display="block";
big.style.display="block"
};
box.onmouseleave=function(){
mask.style.display="none";
big.style.display="none"
};
box.onmousemove=function(event){
event=event || window.event;
var movex=getPageXY(event).x-box.offsetLeft;
var movey=getPageXY(event).y-box.offsetTop;
var x=movex-mask.offsetWidth/2;
var y=movey-mask.offsetHeight/2;
if(x<0){
x=0
};
if(y<0){
y=0
};
if(x>small.offsetWidth-mask.offsetWidth){
x=small.offsetWidth-mask.offsetWidth;
};
if(y>small.offsetHeight-mask.offsetHeight){
y=small.offsetHeight-mask.offsetHeight;
}
mask.style.left=x+"px";
mask.style.top=y+"px";
var bilix=smallImg.offsetWidth/bigImg.offsetWidth;
var biliy=smallImg.offsetHeight/bigImg.offsetHeight;
bigImg.style.marginLeft=-x/bilix+"px";
bigImg.style.marginTop=-y/biliy+"px"
}
function scroll(){
if(window.pageXOffset!=undefined){
return {
left:window.pageXOffset,
top:window.pageYOffset
}
}else{
return {
left:document.documentElement.scrollLeft,
top:document.documentElement.scrollTop
}
}
}
function getPageXY(event){
event=event || window.event;
return {
x:scroll().left+event.clientX,
y:scroll().top+event.clientY
}
};
</script>
</body>
</html>