前言
本票博客主要是放大鏡案例，里面涉及到的知識點會提出來，可放心食用~后有源代碼，
目錄
案例：仿京東放大鏡效果
offset系列
client系列
scroll系列
三大系列總結
??????????????
案例：仿京東放大鏡效果
效果見下圖：
功能要求：
- 當滑鼠移動到小圖片上時，遮罩層出現，同時旁邊大圖片也出現，滑鼠移出，遮罩層消失，大圖片也消失，
- 遮罩層只能在小盒內子移動，不能超出，
- 遮罩層在小盒子內移動，大圖片顯示對應的板塊，
案例分析：
- 元素的隱層和顯示
- 遮罩層的移動范圍用offset計算
- 計算出大盒子內移動的距離
案例代碼：
首先咱們應該將結構搭建好，結構大致為：
先將各個盒子的樣式全部書寫完畢后，把藍色遮罩層盒子和右邊的裝紅色大圖片的盒子隱藏起來，注意，紫色的盒子是相對定位，所有盒子的定位都是根據紫色盒子進行定位的，
代碼如下：
<div class="box">
<img src="./image/pic1.jpg" alt="" class="box_pic">
<div class="mask"></div>
<div class="big">
<img src="./image/bigimg.jpg" alt="" class="bigImg">
</div>
</div>搭建好后，我們給這個box盒子添加滑鼠移動事件，當滑鼠移動到box上時，mask盒子和big盒子出現，滑鼠移出后，mask盒子和big盒子消失，
代碼如下：
var pic = document.querySelector('.box');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
//出現 消失
pic.addEventListener('mouseenter', function () {
mask.style.display = 'block';
big.style.display = 'block';
})
pic.addEventListener('mouseleave', function () {
mask.style.display = 'none';
big.style.display = 'none';
})接著我們就需要計算一下遮罩層可以移動的距離，
由上圖可見，因為我們要求遮罩層不能超出小盒子的范圍，所以遮罩層能在小盒子內移動的距離就只有小盒子的寬度減去遮罩層盒子的寬度，此時我們使用offset中的屬性，
-
offset系列
使用 offset系列相關屬性可以動態的得到該元素的位置（偏移）、大小等
offset系列屬性：
注意：offset系列只有offsetTop和offsetLeft！！！且回傳的值是不帶單位的，
- 對比：offset和style屬性
| offset | style |
| offset 可以得到任意樣式表中的樣式值 | style 只能得到行內樣式表中的樣式值 |
| offset 系列獲得的數值是沒有單位的 | style.width 獲得的是帶有單位的字串 |
| offsetWidth 包含padding+border+width | style.width 獲得不包含padding和border 的值 |
| offsetWidth 等屬性是只讀屬性，只能獲取不能賦值 | style.width 是可讀寫屬性，可以獲取也可以賦值 |
| 總結：適合獲取元素大小位置 | 總結：適合給元素更改值 |
那么接下來我們先使用e.pageX和e.pageY獲取到滑鼠當前的坐標，得到之后用e.pageX-box.offsetLeft得到的就是盒子里面的滑鼠的位置了，話不多說，看圖解！
黑線-紅線得到的距離就是當前滑鼠在盒子內的位置，另外 由于遮罩層是一個盒子，滑鼠定位是緊貼著盒子的左上角的，我們需要將盒子往上移動50%，往右移動50%，讓滑鼠與盒子的中心點對齊，最后我們得到滑鼠的位置，并且判斷當前是否處于盒子內部，即判斷這個移動的位置是否處于大于0且小于最大移動距離之間，
代碼如下：
pic.addEventListener('mousemove', function (e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// mask移動距離
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
var maskMax = pic.offsetWidth - mask.offsetWidth;
// 判斷是否在盒子內部
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskMax) {
maskX = maskMax;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskMax) {
maskY = maskMax;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
}現在我們可以看到遮罩層可以在盒子內部移動，并且不會超出盒子的范圍，那么本專案就到了最后一步，即讓旁邊的大盒子里的圖片能夠顯示出對應的區塊，
因為兩張圖片的比例相同，我們可以按照下圖公式進行計算：
即：大圖片的移動距離 = 遮擋層移動距離 * 大圖片最大移動距離 / 遮擋層的最大移動距離
代入公式，我們就可以得到大圖片的移動距離，注意，當我們滑鼠從左往右滑時，大圖片應該是從右往左移，所以應該是負值，
代碼如下：
// 大圖片的最大移動距離 = 遮擋層移動距離 * 大圖片最大移動距離 / 遮擋層的最大移動距離
var bigImg = document.querySelector('.bigImg');
bigMax = bigImg.offsetWidth - big.offsetWidth;
var bigX = maskX * bigMax / maskMax;
var bigY = maskY * bigMax / maskMax;
bigImg.style.left = -bigX + 'px';
bigImg.style.top = -bigY + 'px';至此，我們放大鏡的專案就完成啦，一步一步決議下來還是很簡單的！主要是使用了offset系列屬性，那么介紹了offset系列屬性，不介紹一下他的另外兩個小伙伴怎么能行？補充介紹一下client系列和scroll系列，
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
margin: 30px;
width: 300px;
height: 300px;
/* pointer-events: none; */
/* cursor: alias; */
/* cursor: default; */
}
.box_pic {
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
.mask {
display: none;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: rgb(54, 240, 240);
opacity: 0.5;
cursor: all-scroll;
z-index: 9;
}
.big {
display: none;
position: absolute;
top: 0;
left: 320px;
width: 500px;
height: 500px;
overflow: hidden;
border: 1px solid #ccc;
}
.big img {
position: absolute;
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<div class="box">
<img src="./image/pic1.jpg" alt="" class="box_pic">
<div class="mask"></div>
<div class="big">
<img src="./image/bigimg.jpg" alt="" class="bigImg">
</div>
</div>
</div>
<script>
var pic = document.querySelector('.box');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
//出現 消失
pic.addEventListener('mouseenter', function () {
mask.style.display = 'block';
big.style.display = 'block';
})
pic.addEventListener('mouseleave', function () {
mask.style.display = 'none';
big.style.display = 'none';
})
// 移動
//獲取滑鼠位置
pic.addEventListener('mousemove', function (e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// mask移動距離
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
var maskMax = pic.offsetWidth - mask.offsetWidth;
// 判斷是否在盒子內部
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskMax) {
maskX = maskMax;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskMax) {
maskY = maskMax;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
// 大圖片的最大移動距離 = 遮擋層移動距離 * 大圖片最大移動距離 / 遮擋層的最大移動距離
var bigImg = document.querySelector('.bigImg');
bigMax = bigImg.offsetWidth - big.offsetWidth;
var bigX = maskX * bigMax / maskMax;
var bigY = maskY * bigMax / maskMax;
bigImg.style.left = -bigX + 'px';
bigImg.style.top = -bigY + 'px';
})
</script>
</body>
</html>-
client系列
使用 client 系列的相關屬性來獲取元素可視區的相關資訊，
client系列屬性：
注意：client包含padding值，回傳值也不帶單位，
-
scroll系列
使用 scroll 系列的相關屬性可以動態的得到該元素的大小、滾動距離等，
scroll系列屬性：
三大系列總結
三大系列的內容包含： 
主要用法如下：
- offset系列 經常用于獲得元素位置 offsetLeft offsetTop
- client經常用于獲取元素大小 clientWidth clientHeight
- scroll 經常用于獲取滾動距離 scrollTop scrollLeft
- 注意頁面滾動的距離通過 window.pageXOffset 獲得
看完這篇博客，是不是把放大鏡案例直接拿下！本案例不算難，主要是通過這個案例復習BOM物件中的offset、client和scroll，我們還可以通過這些知識點完成模態框的制作、消滅星星案例哦~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/354667.html
標籤：其他
上一篇：Java專案:在線購書商城系統(java+jsp+mysql+servlet+ajax)
下一篇：Vue 生命周期