<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 350px;
margin: 100px;
border: 1px solid red;
position: relative;
}
/*big的宽度为400,但是big下的img宽度为800,设置了big的overflow为hidden,所以图片只看到一部分*/
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.big img {
position: absolute;
border:1px solid red;
}
/*遮盖层,鼠标移上去的时候显示的黄色小块*/
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
display: none;
}
.small {
position: relative;
}
</style>
<script>
window.onload = function(){
var box = document.getElementById('box');
var small = document.getElementsByClassName('small')[0];
var small_img = small.getElementsByTagName('img')[0];
var mask = document.getElementsByClassName('mask')[0];
var big = document.getElementsByClassName('big')[0];
var big_img = big.getElementsByTagName('img')[0];
// 给small添加mousehover,mouseout事件
// onmouseenter不支持冒泡事件,所以不用onmouseover
small.onmouseenter = function(){
mask.style.display="block";
big.style.display="block";
}
small.onmouseleave = function(){
mask.style.display="none";
big.style.display="none";
}
small.onmousemove = function(){
// 获取鼠标相对small的top和left
var mouseX = event.pageX - box.offsetLeft;
var mouseY = event.pageY - box.offsetTop;
// 获取小黄块相对small的位置
var maskX = mouseX - mask.offsetWidth/2;
var maskY = mouseY - mask.offsetHeight/2;
// 控制小黄块在small内
var maskXmax = small.offsetWidth-mask.offsetWidth;
var maskYmax = small.offsetHeight-mask.offsetHeight;
if(maskX<0){
maskX = 0;
}
if(maskY<0){
maskY = 0;
}
if(maskX>maskXmax){
maskX = maskXmax;
}
if(maskY>maskYmax){
maskY = maskYmax;
}
mask.style.left= maskX+"px";
mask.style.top= maskY+"px";
// 根据小图比例 控制大图位置
// mask移动的距离 / mask最大能够移动的距离 = 大图片移动的距离 / 大图片最大能够移动的距离
var bigX = maskX / maskXmax * (big_img.offsetWidth-big.offsetWidth);
var bigY = maskY / maskYmax * (big_img.offsetHeight-big.offsetHeight);
big_img.style.top= -bigY+"px";
big_img.style.left= -bigX+"px";
}
}
</script>
</head>
<body>
<div class="box" id="box">
<div class="small">
<img src="small.jpg" width="350" alt=""/>
<div class="mask"></div>
</div>
<div class="big">
<img src="big.jpg" width="800" alt=""/>
</div>
</div>
</body>
<script>
</script>
</html>