放大镜2

来源：互联网发布：电信网络犯罪有哪些编辑：程序博客网时间：2024/06/06 17:27

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<styletype="text/css">

.min{

width:350px;

height:350px;

border:1px solid black;

float:left;

position:relative;

}

.max{

width:350px;

height:350px;

border:1px solid black;

float:left;

display:none;

overflow:hidden;

position:relative;

}

.maximg{

position:absolute;

}

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

<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];

var img = document.querySelector(".max img");

// 当鼠标移入时，让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;

// fd小块的显示(用小块判断边界需要写上面)

// FD.style.left = x - FD.offsetWidth / 2 - l + "px";

// FD.style.top = y - FD.offsetHeight / 2 - t + "px";

// 用鼠标处理左右边界

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(FD.offsetLeft <= 0){

// FD.style.left = 0;

// }else if(FD.offsetLeft >= maxX){

// FD.style.left = maxX + "px";

// }

// 用鼠标处理上下边界

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;

}

// 用小块判断上下边界

// if(FD.offsetTop <= 0){

// FD.style.top = 0;

// }else if(FD.offsetTop >= maxY){

// FD.style.top = maxY + "px";

// }

// fd小块的显示（用鼠标判断边界写在下面）

FD.style.left = x - FD.offsetWidth / 2 - l + "px";

FD.style.top = y - FD.offsetHeight / 2 - t + "px";

// 求比例

var pertX = FD.offsetLeft / Min.offsetWidth;

var pertY = FD.offsetTop / Min.offsetHeight;

// 大图的显示

img.style.left = -pertX * img.offsetWidth + "px";

img.style.top = -pertY * img.offsetHeight + "px";

}

// 当鼠标移出时，让max和fd都消失

Min.onmouseout = function(){

FD.style.display = "";

Max.style.display = "";

}

</script>

</body>

</html>

0 0