<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>放大镜</title>
<style>
* {
margin: 0;
padding: 0;
}
#demo {
display: block;
323px;
height: 430px;
margin: 5px;
position: relative;
border: 1px solid #ccc;
}
#small-box {
position: relative;
z-index: 1;
}
#float-box {
display: none;
160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
}
#big-box {
display: none;
position: absolute;
top: 0;
left: 0px;
323px;
height: 430px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 10;
cursor: crosshair;
}
#big-box img {
display: inline-block;
323px;
position: absolute;
z-index: 5;
}
</style>
</head>
<body>
<div id="demo">
<div id="small-box">
<div id="float-box"></div>
<img
src="https://img.alicdn.com/imgextra/https://img.alicdn.com/bao/uploaded/i2/1026430696/O1CN011H0o7UD6ZwLT3vl_!!1026430696.jpg_430x430q90.jpg"
/>
</div>
<div id="big-box">
<img
class="maxImg"
src="https://img.alicdn.com/imgextra/https://img.alicdn.com/bao/uploaded/i2/1026430696/O1CN011H0o7UD6ZwLT3vl_!!1026430696.jpg"
/>
</div>
</div>
<script>
//页面加载完毕后执行
window.onload = function() {
//找五个个元素：demo，smallBox,foatBox,bigfloatBox,imgs,
var objDemo = document.getElementById("demo");
var objSmallBox = document.getElementById("small-box");
var objFloatBox = document.getElementById("float-box");
var objBigBox = document.getElementById("big-box");
var objBigBoxImg = objBigBox.getElementsByTagName("img")[0];
var sacle = 2;
//给小盒子添加事件，移入和移出
//移入：浮动的box和和bigBox显示
objDemo.onmouseover = function() {
objFloatBox.style.display = "block";
objBigBox.style.display = "block";
sacle = 2;
changeImgWidth();
};
//移除：浮动的box和bigBox隐藏
objDemo.onmouseout = function() {
objFloatBox.style.display = "none";
objBigBox.style.display = "none";
sacle = 2;
document.querySelector(".maxImg").style.width =
objDemo.clientWidth + "px";
changeImgWidth(true);
};
// 鼠标滑动事件
objDemo.onmousewheel = function(event) {
if (event.deltaY < 0) {
sacle += 0.01;
} else {
sacle -= 0.01;
}
if (sacle < 1) {
sacle = 1;
}
if (sacle > 2) {
sacle = 2;
}
changeImgWidth();
event.preventDefault();
};
//给小盒子添加鼠标移动事件
objDemo.onmousemove = function(ev) {
setSize(ev);
};
function changeImgWidth(notRender) {
if (!notRender) {
var demoWidth = objDemo.clientWidth;
objBigBoxImg.style.width = demoWidth * sacle + "px";
setSize(event);
}
}
function setSize(ev) {
var _event = ev || window.event; //做兼容性，兼容IE
//1计算值：
var left =
_event.clientX -
objDemo.offsetLeft -
objSmallBox.offsetLeft -
objFloatBox.offsetWidth / 2;
var top =
_event.clientY -
objDemo.offsetTop -
objSmallBox.offsetTop -
objFloatBox.offsetHeight / 2;
//5.优化，在前面加判断,不让其溢出，加判断
if (left < 0) left = 0;
if (top < 0) top = 0;
if (left > objSmallBox.offsetWidth - objFloatBox.offsetWidth)
left = objSmallBox.offsetWidth - objFloatBox.offsetWidth;
if (top > objSmallBox.offsetHeight - objFloatBox.offsetHeight)
top = objSmallBox.offsetHeight - objFloatBox.offsetHeight;
//2把值赋值给放大镜
objFloatBox.style.left = left + "px";
objFloatBox.style.top = top + "px";
//3计算比例
var percentX =
left / (objSmallBox.offsetWidth - objFloatBox.offsetWidth);
var percentY =
top / (objSmallBox.offsetHeight - objFloatBox.offsetHeight);
//4利用这个比例计算距离后赋值给右侧的图片
objBigBoxImg.style.left =
-percentX * (objBigBoxImg.offsetWidth - objBigBox.offsetWidth) +
"px";
objBigBoxImg.style.top =
-percentY * (objBigBoxImg.offsetHeight - objBigBox.offsetHeight) +
"px";
}
};
</script>
</body>
</html>