<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#min_wrap{
position:absolute;
width:350px;
border:1px solid purple;
}
#max_wrap{
position:absolute;
left:370px;
width:400px;
height:400px;
border:1px solid purple;
overflow:hidden;
display:none;
}
#max_wrap{
position:absolute;
}
#slider{
position:absolute;
left:0;
top:0;
width:175px;
height:175px;
background:rgba(255,255,0,.3);
cursor:pointer;
display:none;
}
</style>
</head>
<body>
<div id="min_wrap">
<img src="img/21.jpg" alt="">
<div id="slider"></div>
</div>
<div id="max_wrap">
<img src="img/20.jpg" alt="">
</div>
</body>
<script>
function e(){
//获取元素
var minWrap = document.getElementById('min_wrap');
var maxWrap = document.getElementById('max_wrap');
var slider = document.getElementById('slider');
var maxImg = maxWrap.children[0];
//鼠标移入事件
minWrap.onmousemove = function(event){
//让slider和maxWrap显示出来
slider.style.display = "block";
maxWrap.style.display = "block";
//处理event
var event = event || window.event;
//获取鼠标坐标
var disX = event.clientX - minWrap.offsetLeft;
var disY = event.clientY - minWrap.offsetTop;
/*
对象在可视去内的值 - 小图片容器的偏移量 = 当前鼠标的坐标值
*/
//将鼠标点处于移动滑块的正中间
var x = disX - (slider.offsetWidth / 2);
var y = disY - (slider.offsetHeight / 2);
/*
当前鼠标坐标点 - (移动滑块)
*/
//获取移动滑块的移动范围
var maxWidth = minWrap.clientWidth - slider.offsetWidth;
var maxHeight = minWrap.clientHeight - slider.offsetHeight;
//判断限定最大宽度和最大高度
if (x>=maxWidth){
x=maxWidth
}else if (x<=0) {
x=0;
}
if (y>=maxHeight){
y=maxHeight
}else if(y<=0){
y=0;
}
slider.style.left = x + "px";
slider.style.top = y + "px";
// 偏移量的比例
var scaleX = x / maxWidth;
var scaleY = y / maxHeight;
/*
鼠标坐标点在移动滑块中的位置 / 最大宽度 = 偏移量的比例
*/
maxWrap.scrollLeft = scaleX * (maxImg.offsetWidth - maxWrap.clientWidth);
maxWrap.scrollTop = scaleY * (maxImg.offsetHeight - maxWrap.clientHeight);
/*
偏移量的比例 * (大图片的实际宽高 - 大图片容器的可见宽高) =
具体的偏移量.
*/
}
//鼠标移出事件
minWrap.onmouseleave = function(){
//让slider和maxWrap隐藏
slider.style.display = "none";
maxWrap.style.display = "none";
}
}
e();
</script>
</html>
