<div class="product_intro clearfix">
?? ??? ??? ?<!-- 預(yù)覽區(qū)域 -->
?? ??? ??? ?<div class="preview_wrap fl">
?? ??? ??? ??? ?<div class="preview_img">
?? ??? ??? ??? ??? ?<img src="img/big5.jpg" class="smallImg">
?? ??? ??? ??? ??? ?<div class="mask">
?
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?<div class="big">
?? ??? ??? ??? ??? ??? ?<img src="img/big5.jpg" class="bigImg">
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ?</div>
? ? ?</div>
</div>

.preview_wrap {
? ? ? width: 400px;
? ? ? height: 590px;
?? ??? ??? ?}
?
.preview_img {
? ? ? position: relative;
? ? ? height: 398px;
? ? ? border: 1px solid #CCCCCC;
? ? ? background-color: pink;text-align: center;
?? ??? ??? ??? ?
?? ??? ??? ?}
?
.preview_img .smallImg {
? ? ? margin-top: 25%;
? ? ? width: 200px;
?? ??? ??? ?}
?
.mask {
? ? ? ? display: none;
? ? ? ? position: absolute;
? ? ? ? top: left: 0;
? ? ? ? width: 300px;
? ? ? ? height: 300px;
? ? ? ? background-color: yellow;
? ? ? ?opacity: .5;
? ? ? ?border: 1px solid #CCCCCC;
? ? ? ? cursor: move;
?}
?
.big {
? ? ? ?display: none;
? ? ? ?position: absolute;
? ? ? ?left: 410px;
? ? ? ?top: 0;
? ? ? ?width: 500px;
? ? ? ?height: 500px;
? ? ? ?z-index: 999;
? ? ? ?border: 1px solid #ccc;
? ? ? ?overflow: hidden;
}

.big img {
? ? ? ?position: absolute;
? ? ? ?top: 0;
? ? ? ?left: 0;
}

// 整個(gè)案例可以分為三個(gè)功能模塊
// 鼠標(biāo)經(jīng)過(guò)小圖片盒子，黃色的遮擋層和大圖片盒子顯示，離開(kāi)隱藏2個(gè)盒子功能
// 黃色的遮擋層跟隨鼠標(biāo)功能。
// 移動(dòng)黃色遮擋層，大圖片跟隨移動(dòng)功能。
?
// 1.鼠標(biāo)經(jīng)過(guò)小圖片盒子，黃色的遮擋層和大圖片盒子顯示，離開(kāi)隱藏2個(gè)盒子功能
// 就是顯示與隱藏
?
// 當(dāng)頁(yè)面全部加載執(zhí)行完畢后再執(zhí)行js代碼
window.addEventListener('load', function() {
?? ??? ??? ?var preview_img = document.querySelector('.preview_img');
?? ??? ??? ?var mask = document.querySelector('.mask');
?? ??? ??? ?var big = document.querySelector('.big');
?
?? ??? ??? ?//2.當(dāng)我們鼠標(biāo)經(jīng)過(guò) preview_img 就顯示和隱藏mask遮擋層和 big 大盒子
?? ??? ??? ?preview_img.addEventListener('mouseover', function() {
?? ??? ??? ??? ?mask.style.display = 'block';
?? ??? ??? ??? ?big.style.display = 'block';
?? ??? ??? ?})
?? ??? ??? ?preview_img.addEventListener('mouseout', function() {
?? ??? ??? ??? ?mask.style.display = 'none';
?? ??? ??? ??? ?big.style.display = 'none';
?? ??? ??? ?})
?
?? ??? ??? ?// 黃色的遮擋層跟隨鼠標(biāo)功能。
?? ??? ??? ?// 把鼠標(biāo)坐標(biāo)給遮擋層不合適。因?yàn)檎诋?dāng)層坐標(biāo)以父盒子為準(zhǔn)。
?? ??? ??? ?// 首先是獲得鼠標(biāo)在盒子的坐標(biāo)
?? ??? ??? ?// 之后把數(shù)值給遮擋層做為left和top值。
?? ??? ??? ?// 此時(shí)用到鼠標(biāo)移動(dòng)事件，但是還是在小圖片盒子內(nèi)移動(dòng)。
?
?? ??? ??? ?// 2.鼠標(biāo)移動(dòng)的時(shí)候,讓黃色的盒子跟著鼠標(biāo)來(lái)走
?? ??? ??? ?preview_img.addEventListener('mousemove', function(e) {
?? ??? ??? ??? ?//(1).先計(jì)算出鼠標(biāo)在盒子里的坐標(biāo)
?? ??? ??? ??? ?// 先算出鼠標(biāo)在頁(yè)面中的坐標(biāo),減去盒子距離左側(cè)的距離,就是鼠標(biāo)在盒子里的坐標(biāo)
?? ??? ??? ??? ?// 但是這里要注意:
?? ??? ??? ??? ?// 要看他有沒(méi)有父元素,并且父元素有沒(méi)有定位
?
?? ??? ??? ??? ?var x = e.pageX - this.offsetLeft;
?? ??? ??? ??? ?var y = e.pageY - this.offsetTop;
?? ??? ??? ??? ?// console.log(x,y)
?? ??? ??? ??? ?//(2)盒子高度 300的一半 150
?? ??? ??? ??? ?// (3)mask移動(dòng)的距離
?? ??? ??? ??? ?var maskX = x - mask.offsetWidth / 2;
?? ??? ??? ??? ?var maskY = y - mask.offsetHeight / 2;
?
?? ??? ??? ??? ?// (4)遮擋層不能超出小圖片盒子范圍
?? ??? ??? ??? ?// 如果小于0,就把坐標(biāo)設(shè)置為0
?
?? ??? ??? ??? ?//遮擋層的最大一定距離,因?yàn)槎际钦叫?所以高也適用
?? ??? ??? ??? ?var maskMax = preview_img.offsetWidth - mask.offsetWidth;
?? ??? ??? ??? ?if (maskX <= 0) {
?? ??? ??? ??? ??? ?maskX = 0
?? ??? ??? ??? ??? ?//如果大于遮擋層最大的移動(dòng)距離，就把坐標(biāo)設(shè)置為最大的移動(dòng)距離
?? ??? ??? ??? ??? ?//遮擋層的最大移動(dòng)距離:小圖片盒子寬度減去遮擋層盒子寬度
?? ??? ??? ??? ?} else if (maskX >= maskMax) {
?? ??? ??? ??? ??? ?maskX = maskMax;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?if (maskY <= 0) {
?? ??? ??? ??? ??? ?maskY = 0;
?? ??? ??? ??? ??? ?//如果大于遮擋層最大的移動(dòng)距離，就把坐標(biāo)設(shè)置為最大的移動(dòng)距離
?? ??? ??? ??? ??? ?//遮擋層的最大移動(dòng)距離:小圖片盒子寬度減去遮擋層盒子寬度
?? ??? ??? ??? ?} else if (maskY >= maskMax) {
?? ??? ??? ??? ??? ?maskY = maskMax;
?? ??? ??? ??? ?}
?
?? ??? ??? ??? ?mask.style.left = maskX + 'px';
?? ??? ??? ??? ?mask.style.top = maskY + 'px';
?
?
?? ??? ??? ??? ?// 移動(dòng)黃色遮擋層, 大圖片跟隨移動(dòng)功能
?? ??? ??? ??? ?// 求大圖片的移動(dòng)距離公式:
?? ??? ??? ??? ?// ?? ?遮擋層移動(dòng)距離 / 遮擋層最大移動(dòng)距離 = 大圖片移動(dòng)距離 / 大圖片最大移動(dòng)距離
?? ??? ??? ??? ?// 3.大圖片的移動(dòng)距離=遮擋層移動(dòng)距離*大圖片最大移動(dòng)距離/遮擋層的最大移動(dòng)距離
?? ??? ??? ??? ?var bigImg = document.querySelector('.bigImg'); //大圖
?? ??? ??? ??? ?//大圖片最大移動(dòng)距離
?? ??? ??? ??? ?var bigMax = bigImg.offsetWidth - big.offsetWidth;
?? ??? ??? ??? ?//大圖片最大移動(dòng)距離
?? ??? ??? ??? ?var bigX = maskX * bigMax / maskMax;
?? ??? ??? ??? ?var bigY = maskY * bigMax / maskMax;
?? ??? ??? ??? ?bigImg.style.left = -bigX + 'px';
?? ??? ??? ??? ?bigImg.style.top = -bigY + 'px';
?? ??? ??? ?})
?
?})