该放大区域用背景图片放大
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css"> body { height: 1200px; background-color: lightskyblue; } ul { margin: 0; padding: 0; list-style: none; } .itemarea { position: relative; width: 500px; height: 680px; border: 1px black solid; margin: 50px auto; } .itemarea .pic { margin-bottom: 15px; } .itemarea img { width: 500px; height: 600px; } .itemarea .pic .cover { position: absolute; left: 0; top: 0; width: 200px; height: 200px; background-image: url(img/7.png); opacity: 0.6; display: none; } .itemarea .list { display: flex; } .itemarea .list li { margin: auto; } .itemarea .list img { display: block; width: 50px; height: 50px; } .itemarea .detail { position: absolute; top: 0; left: 500px; width: 400px; height: 400px; display: none; border: 1px black solid; background: url(img/1.PNG); background-size: 1000px 1200px; } .itemarea .list .current { border: 2px green solid; } </style>
</head>
<body>
<div class="itemarea">
<div class="pic">
<img src="img/1.PNG">
<div class="cover"></div>
</div>
<ul class="list">
<li><img src="img/1.PNG"></li>
<li><img src="img/2.PNG"></li>
<li><img src="img/3.PNG"></li>
<li><img src="img/4.PNG"></li>
<li><img src="img/5.PNG"></li>
<li><img src="img/6.PNG"></li>
</ul>
<div class="detail">
</div>
</div>
<script type="text/javascript"> var itemarea = document.querySelector(".itemarea"); var list = document.querySelector(".list"); img = document.querySelector(".pic img"); imgs = list.querySelectorAll("img"); pic = document.querySelector(".itemarea .pic"); cover = document.querySelector(".cover"); detail = document.querySelector(".detail"); list.addEventListener("mousemove", function(e) { if (e.target.tagName == "IMG") { img.src = e.target.src; detail.style.backgroundImage = "url(" + e.target.src + ")"; imgs.forEach(function(item) { item.className = ""; }) e.target.className = "current"; } }) pic.addEventListener("mousemove", function(e) { var x = e.clientX; y = e.clientY; cx = pic.getBoundingClientRect().left; cy = pic.getBoundingClientRect().top; tx = x - cx - 100; ty = y - cy - 100; if (tx < 0) { tx = 0; } if (ty < 0) { ty = 0; } if (tx >300) { tx = 300; } if (ty > 400) { ty = 400; } cover.style.left = tx + "px"; cover.style.top = ty + "px"; detail.style.backgroundPosition = tx / 300 * 100 + "%" + ty / 400 * 100 + "%"; }) itemarea.onmouseout = function() { cover.style.display = "none"; detail.style.display = "none" } itemarea.onmouseover = function() { cover.style.display = "block"; detail.style.display = "block"; } </script>
</body>
</html>
效果如下：
