| |
<!DOCTYPE html> |
| |
<html lang="en"> |
| |
|
| |
<head> |
| |
<meta charset="UTF-8"> |
| |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| |
<title>Document</title> |
| |
<style> |
| |
ul { |
| |
padding: 0; |
| |
list-style: none; |
| |
display: flex; |
| |
} |
| |
|
| |
ul>li { |
| |
margin-left: 10px; |
| |
border: 1px solid #ccc; |
| |
} |
| |
|
| |
.layout { |
| |
display: flex; |
| |
} |
| |
|
| |
.mid_img, .lar_img { |
| |
width: 430px; |
| |
height: 430px; |
| |
border: 1px dashed #ccc; |
| |
} |
| |
|
| |
.lar_img { |
| |
background-image: url("./img/imgA_3.jpg"); |
| |
margin-left: 20px; |
| |
} |
| |
|
| |
.mid_img { |
| |
background-image: url("./img/imgA_2.jpg"); |
| |
position: relative; |
| |
} |
| |
|
| |
.bar { |
| |
display: block; |
| |
width: 231px; |
| |
height: 231px; |
| |
/* display: none; */ |
| |
background-color: rgba(0, 0, 200, .4); |
| |
position: absolute; |
| |
} |
| |
|
| |
.none { |
| |
display: none; |
| |
} |
| |
</style> |
| |
</head> |
| |
|
| |
<body> |
| |
<script src="jquery-3.3.1.js"></script> |
| |
<div class="container"> |
| |
<div class="layout"> |
| |
<section class="mid_img"> |
| |
<i class="bar none"></i> |
| |
</section> |
| |
<section class="lar_img none"></section> |
| |
</div> |
| |
<ul> |
| |
<li><img src="./img/imgA_1.jpg" alt=""></li> |
| |
<li><img src="./img/imgB_1.jpg" alt=""></li> |
| |
<li><img src="./img/imgC_1.jpg" alt=""></li> |
| |
</ul> |
| |
</div> |
| |
<script> |
| |
let mid_arr = ["imgA_2.jpg", "imgB_2.jpg", "imgC_2.jpg"]; |
| |
let large_arr = ["imgA_3.jpg", "imgB_3.jpg", "imgC_3.jpg"]; |
| |
|
| |
let $mid_img = $(".mid_img"); // 左侧中图 |
| |
let $lar_img = $(".lar_img"); // 右侧大图 |
| |
let $li_arr = $(".container>ul>li"); // 所有小图 |
| |
let $bar = $(".mid_img>i"); // 放大镜本镜 |
| |
|
| |
// 移入变图 |
| |
$.each($li_arr, function (index,item) { |
| |
$(item).mousemove(function () { |
| |
$mid_img.css("background-image", `url(./img/${mid_arr[index]})`) |
| |
$(".lar_img").css("background-image", `url(./img/${large_arr[index]})`) |
| |
}); |
| |
}); |
| |
|
| |
// 移入中图 |
| |
let max_x, max_y; // 可移动的最大范围 x |
| |
let x, y; |
| |
$mid_img.on("mouseenter", function () { |
| |
$bar.css("display","block"); |
| |
$lar_img.css("display","block"); |
| |
max_x = $mid_img.width() - $bar.innerWidth(); |
| |
max_y = $mid_img.height() - $bar.innerHeight(); |
| |
// console.log(max_x); |
| |
}) |
| |
// 移出中图 |
| |
$mid_img.on("mouseleave",function () { |
| |
$bar.css("display","none"); |
| |
$lar_img.css("display","none"); |
| |
}) |
| |
// 中图里移动 |
| |
|
| |
$mid_img.on("mousemove", function(event) { |
| |
x = event.clientX - $mid_img.position().left - $bar.innerWidth() / 2; |
| |
y = event.clientY - $mid_img.position().top - $bar.innerHeight() / 2; |
| |
|
| |
x < 0 ? x = 0 : ""; |
| |
x > max_x ? x = max_x : ""; |
| |
y < 0 ? y = 0 : ""; |
| |
y > max_y ? y = max_y : ""; |
| |
|
| |
$bar.css({ |
| |
left: `${x}px`, |
| |
top: `${y}px` |
| |
}) ; |
| |
|
| |
// 右边大图变位置 |
| |
$lar_img.css({ |
| |
backgroundPosition: `${-(800 / 430 * x)}px ${-(800 / 430 * y)}px` |
| |
}) |
| |
// Object.assign(lar_img.style, { |
| |
// backgroundPosition: `${-(800 / 430 * x)}px ${-(800 / 430 * y)}px` |
| |
// }); |
| |
}) |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
</script> |
| |
|
| |
|
| |
</body> |
| |
|
| |
</html> |
