<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="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>
<div class="min">
<img src="img/x.jpg" />
<div class="fd"></div>
</div>
<div class="max">
<img src="img/d.jpg" />
</div>
<script type="text/javascript">
var Min = 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；
var x = event.clientX;
var y = event.clientY;
var l = Min.offsetLeft;
var t = Min.offsetTop;
// fd移动范围，关键是边界处理
var maxX = Min.clientWidth - FD.offsetWidth;
var maxY = 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>
扫一扫
649
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
