放大镜1
来源：互联网 发布：电信网络犯罪有哪些 编辑：程序博客网 时间：2024/05/17 08:13
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<styletype="text/css">
.min{
width:350px;
height:350px;
border:1px solid black;
float:left;
position:relative;
}
.max{
width:800px;
height:800px;
border:1px solid black;
float:left;
display:none;
}
.fd{
width:150px;
height:150px;
background-color: skyblue;
opacity:0.3;
position:absolute;
left:0;
top:0;
display:none;
}
</style>
</head>
<body>
<divclass="min">
<imgsrc="img/x.jpg" />
<div class="fd"></div>
</div>
<divclass="max">
<imgsrc="img/d.jpg" />
</div>
<scripttype="text/javascript">
varMin = document.getElementsByClassName("min")[0];
var Max = document.getElementsByClassName("max")[0];
var FD = document.getElementsByClassName("fd")[0];
// 当鼠标移入时，让max和fd都出现
Min.onmouseover= function(){
FD.style.display= "block";
Max.style.display= "block";
}
// 当鼠标在小块里面拖着小fd移动时
Min.onmousemove= function(){
// 需要剪掉Min的offsetleft = 8；
varx = event.clientX;
vary = event.clientY;
varl = Min.offsetLeft;
vart = Min.offsetTop;
// fd移动范围，关键是边界处理
varmaxX = Min.clientWidth - FD.offsetWidth;
varmaxY = Min.clientHeight - FD.offsetHeight;
// 用鼠标处理左右边界
if(x <= FD.offsetWidth / 2+ l) {
x = FD.offsetWidth / 2 +l;
}else if(x >= maxX + FD.offsetWidth/ 2 + l) {
x = maxX + FD.offsetWidth / 2 + l;
}
// 处理上下边界
if(y <= FD.offsetHeight / 2 + t) {
y = FD.offsetHeight / 2 +t;
}else if(y >= maxY + FD.offsetHeight/ 2 + t) {
y = maxY + FD.offsetHeight / 2 + t;
}
FD.style.left= x - FD.offsetWidth / 2 - l + "px";
FD.style.top= y - FD.offsetHeight / 2 - t + "px";
}
// 当鼠标移出时，让max和fd都消失
Min.onmouseout= function(){
FD.style.display= "";
Max.style.display= "";
}
</script>
</body>
</html>
