<!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];
//鼠標(biāo)移入事件
minWrap.onmousemove = function(event){
//讓slider和maxWrap顯示出來
slider.style.display = "block";
maxWrap.style.display = "block";
//處理event
var event = event || window.event;
//獲取鼠標(biāo)坐標(biāo)
var disX = event.clientX - minWrap.offsetLeft;
var disY = event.clientY - minWrap.offsetTop;
/*
對象在可視去內(nèi)的值 - 小圖片容器的偏移量 = 當(dāng)前鼠標(biāo)的坐標(biāo)值
*/
//將鼠標(biāo)點(diǎn)處于移動(dòng)滑塊的正中間
var x = disX - (slider.offsetWidth / 2);
var y = disY - (slider.offsetHeight / 2);
/*
當(dāng)前鼠標(biāo)坐標(biāo)點(diǎn) - (移動(dòng)滑塊)
*/
//獲取移動(dòng)滑塊的移動(dòng)范圍
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;
/*
鼠標(biāo)坐標(biāo)點(diǎn)在移動(dòng)滑塊中的位置 / 最大寬度 = 偏移量的比例
*/
maxWrap.scrollLeft = scaleX * (maxImg.offsetWidth - maxWrap.clientWidth);
maxWrap.scrollTop = scaleY * (maxImg.offsetHeight - maxWrap.clientHeight);
/*
偏移量的比例 * (大圖片的實(shí)際寬高 - 大圖片容器的可見寬高) =
具體的偏移量.
*/
}
//鼠標(biāo)移出事件
minWrap.onmouseleave = function(){
//讓slider和maxWrap隱藏
slider.style.display = "none";
maxWrap.style.display = "none";
}
}
e();
</script>
</html>
