您的位置：首页 > 其它

放大镜1

2016-07-13 08:50 148 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 放大镜

相关文章推荐

新的分享

章节导航