該放大區域用背景圖片放大
<!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;
/* 此處為放大2倍，顯示框的大小是遮陰框寬高的2倍 */
width: 400px;
height: 400px;
display: none;
border: 1px black solid;
background: url(img/1.PNG);
/* 此處放大2倍，背景圖片的寬高是左邊顯示圖片的2倍 */
background-size: 1000px 1200px;
/* background-size: 200%; 或者這樣寫*/
}
.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">
/*
需求
1，滑鼠放入圖片時候，會動態修改圖片地址
2，滑鼠放入大圖，會動態修改右邊圖片位置
2.1顯示圖片的放大鏡，
2.2顯示右邊效果
*/
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");
/* 監聽事件，切換圖片src */
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";
/* 根據遮陰框在盒子的移動距離百分比------對應放映框在大圖片的移動距離百分比 */
/* tx,ty/遮陰框的極限范圍 */
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>
效果如下：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/195261.html
標籤：其他
上一篇：js實戰代碼系列—周杰倫給你報時間+網頁頁簽制作模板+jQuery初體驗
下一篇：通過 Prop 向子組件傳遞資料