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