放大镜2

最新推荐文章于 2025-06-07 15:45:21 发布

原创最新推荐文章于 2025-06-07 15:45:21 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#放大镜

JavaScript 专栏收录该内容

171 篇文章

订阅专栏

<!DOCTYPE html>

<html>

<head>

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

}

.max img{

position: absolute;

}

.fd{

width: 150px;

height: 150px;

background-color: skyblue;

opacity: 0.3;

position: absolute;

left: 0;

top: 0;

display: none;

}

</style>

</head>

<body>

</div>

</div>

var Min = 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；

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;

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