<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>放大鏡</title>
<style>
* {
margin: 0;
padding: 0
}
#demo {
display: block;
width: 400px;
height: 586px;
margin: 50px;
position: relative;
}
#small-box {
position: relative;
z-index: 1;
}
#small-box img {
width: 400px;
height: 586px;
}
#float-box {
display: none;
width: 120px;
height: 120px;
position: absolute;
background: #dcf4ff;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
}
#mark {
position: absolute;
display: block;
width: 400px;
height: 586px;
background-color: #fff;
filter: alpha(opacity=0);
opacity: 0;
z-index: 10;
}
#big-box {
display: none;
position: absolute;
top: 0;
left: 460px;
width: 400px;
height: 400px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;
;
}
#big-box img {
position: absolute;
z-index: 5
}
</style>
<script>
//頁面加載完畢后執行
window.onload = function () {
//獲取需要的標簽
let objDemo = document.getElementById("demo");
let objSmallBox = document.getElementById("small-box");
let objMark = document.getElementById("mark");
let objFloatBox = document.getElementById("float-box");
let objBigBox = document.getElementById("big-box");
let objBigBoxImage = objBigBox.getElementsByTagName("img")[0];
//鼠標懸浮時，浮塊和右側放大鏡顯示
objMark.onmouseover = function () {
objFloatBox.style.display = "block"
objBigBox.style.display = "block"
}
//鼠標離開后，浮塊和右側放大鏡隱藏
objMark.onmouseout = function () {
objFloatBox.style.display = "none"
objBigBox.style.display = "none"
}
//鼠標在遮罩層移動時
objMark.onmousemove = function (ev) {
let _event = ev || window.event; //兼容多個瀏覽器的event參數模式
// console.log(_event.clientX);//鼠標到屏幕左側的距離
// console.log(objDemo.offsetLeft);//外框到屏幕左側的距離，因為它的父元素為body
// console.log(objSmallBox.offsetLeft);//小盒子的margin
// console.log(objFloatBox.offsetWidth);//浮塊的寬度
let left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
let top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;
//設置邊界處理，防止移出小圖片
if (left < 0) {
left = 0;
} else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
left = objMark.offsetWidth - objFloatBox.offsetWidth;
}
if (top < 0) {
top = 0;
} else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
top = objMark.offsetHeight - objFloatBox.offsetHeight;
}
objFloatBox.style.left = left + "px"; //oSmall.offsetLeft的值是相對什么而言
objFloatBox.style.top = top + "px";
//求其比值
let percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
let percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);
//方向相反，小圖片鼠標移動方向與大圖片相反，故而是負值
objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
}
}
</script>
</head>
<body>
<div id="demo">
<div id="small-box">
<div id="mark"></div>
<div id="float-box"></div>
<img src="timg.jpg" />
</div>
<div id="big-box">
<img src="timg.jpg" />
</div>
</div>
</body>
</html>