js圖片放大鏡效果實(shí)現(xiàn)方法詳解

 /* 圖片容器 */
 .imgBox{
 width: 200px; /* 各位大老爺們看著辦 */
 height: 200px; /* 各位大老爺們看著辦 */
 position: relative; /* 必需 */
 }

 /* 圖片標(biāo)簽 */
 .mainImg{
 width: 100%; /* 各位大老爺們看著辦，盡量100%好看些[斜眼笑] */
 height: 100%; /* 各位大老爺們看著辦，盡量100%好看些[斜眼笑] */
 }

 /* 遮罩層-既放大區(qū)域 */
 .glass{
 position: absolute; /* 必需 */
 width: 50px; /* 遮罩層寬度 此處是放大4倍，所以為200/4=50 */
 height: 50px; /* 遮罩層高度 此處是放大4倍，所以為200/4=50 */
 top: -9999px; /* 絕對位置，先放遠(yuǎn)些 */
 left: -9999px; /* 絕對位置，先放遠(yuǎn)些 */
 cursor: move; /* 鼠標(biāo)樣式，好看些 */
 background: rgba(0,0,180,0.5); /* 遮罩層樣式，好看些 */
 }

 /* 大圖所在的容器 */
 .imgMax{
 position: absolute; /* 必需 */
 overflow: hidden; /* 必需，蓋掉超出的大圖[斜眼笑] */
 left: 210px; /* 必需，此處為距原圖左邊10像素 */
 top: 0; /* 必需，此處為距上邊0像素 */
 width: 200px; /* 放大圖片容器的寬度 此處此處是放大4倍，為200，保持和原圖容器一般大，若此處為400，則是放大2*4倍，那么相應(yīng)的放大圖片應(yīng)該是200*4*2=1600 */
 height: 200px; /* 放大圖片容器的高度 此處此處是放大4倍，為200，保持和原圖容器一般大，若此處為400，則是放大2*4倍，那么相應(yīng)的放大圖片應(yīng)該是200*4*2=1600 */
 display: none; /* 先隱藏 */
 }
 .maxImg{
 position: absolute; /* 必需 */
 width: 800px; /* 此處是放大4倍，所以為200*4=800 受放大圖片所在的容器影響，規(guī)則如上 */
 height: 800px; /* 此處是放大4倍，所以為200*4=800 受放大圖片所在的容器影響，規(guī)則如上 */
 }

 <!-- 圖片容器 -->
 <div class="J_imgBox imgBox">
 <!-- 需要放大的圖片-原始圖 -->
 <img class="J_mainImg mainImg" src="http://img.alicdn.com/bao/uploaded/i7/TB1Xpe_NXXXXXXRXFXXGTq09XXX_035318.jpg_430x430q90.jpg" />
 <!-- 遮罩-既放大的區(qū)域 -->
 <div class="J_glass glass"></div>
 <!-- 大圖的容器 -->
 <div class="J_imgMax imgMax">
 <!-- 大圖 -->
 <img class="J_maxImg maxImg" />
 </div>
 </div>

(function(){
 /* 放大鏡函數(shù)
 ** @imgContainer 需要實(shí)現(xiàn)放大鏡效果的圖片容器 此處是 class 為 J_imgBox 的 div
 */
 function imgZoom(imgContainer){

 // 取大圖url，不知道淘寶圖片規(guī)則如何，反正看了詳情頁的大圖和小圖url對比，隨便寫了個替換
 var imgUrl = imgContainer.querySelector('.J_mainImg').src.replace(/\.(jpg|jpeg|png|gif)(_)(\d+)(x)(\d+)(q90)?/g,'');

 // 取大圖標(biāo)簽的節(jié)點(diǎn)
 var maxImg = imgContainer.querySelector('.J_maxImg');

 // 給該節(jié)點(diǎn)的src屬性賦值為大圖的url
 maxImg.src = imgUrl;

 // 取大圖所在的容器
 var maxImgContainer = imgContainer.querySelector('.J_imgMax');

 // 取遮罩塊
 var glassBlock = imgContainer.querySelector('.J_glass');

 // 取消放大鏡效果
 var hideMaxImg = function(){
 glassBlock.style.top = '-9999px';
 glassBlock.style.left = '-9999px';
 maxImgContainer.style.display = 'none';
 }

 // 鼠標(biāo)移出圖片區(qū)域，取消放大鏡效果
 imgContainer.onmouseout = function(event){
 event.stopPropagation();
 hideMaxImg();
 };

 // 鼠標(biāo)在圖片區(qū)域內(nèi)移動事件
 imgContainer.onmousemove = function(event) {
 event.stopPropagation();

 // 取圖片容器的大小及其相對于視口的位置，需要實(shí)時取，所以放在move事件里
 var clientRect = event.currentTarget.getBoundingClientRect();

 // 獲取距鼠標(biāo)距的上和左的坐標(biāo)
 var leftX = event.clientX - clientRect.left;
 var leftY = event.clientY - clientRect.top;

 // 動態(tài)設(shè)置遮罩塊的left和top位置 這里需要減去遮罩層的一半，因?yàn)槭髽?biāo)位于遮罩塊中心點(diǎn)
 var pointerLeft = leftX - 25;
 var pointerTop = leftY - 25;

 // 如果鼠標(biāo)坐標(biāo)移動超出原始圖片區(qū)域邊緣 則取消放大鏡效果 因?yàn)檫@里存在快速移動鼠標(biāo)到大圖區(qū)域時，鼠標(biāo)仍處在外層的圖片區(qū)域內(nèi)，并不會觸發(fā)mouseout事件(雖然中間隔了小小的間距，但是快速移動仍能產(chǎn)生這個bug,如代碼下面的圖所示)
 if((pointerLeft+25) > clientRect.width || pointerLeft < 0 - 25 || (pointerTop+25) > clientRect.height || pointerTop < 0 - 25){
 hideMaxImg();
 return !1;
 };

 // 遮罩塊在最左邊的時候，鼠標(biāo)仍在圖片區(qū)域內(nèi)，可在遮罩塊左邊緣至中心線區(qū)域內(nèi)移動，且這時遮罩塊為距左0像素
 if(pointerLeft < 0){
 pointerLeft = 0;
 };

 // 同上 右邊限制
 if(pointerLeft > clientRect.width - 50){
 pointerLeft = clientRect.width - 50;
 };

 // 同上 頂部限制
 if(pointerTop < 0){
 pointerTop = 0;
 };

 // 同上 底部限制
 if(pointerTop > clientRect.height - 50){
 pointerTop = clientRect.height - 50;
 };

 // 設(shè)置遮罩塊的位置
 glassBlock.style.left = pointerLeft;
 glassBlock.style.top = pointerTop;

 // 取遮罩快距離左邊的位置和圖片區(qū)域的寬高比，用于計(jì)算大圖偏移距離，展示遮罩塊所對應(yīng)的圖片區(qū)域
 var percentLeft = pointerLeft/clientRect.width;
 var percentHeight = pointerTop/clientRect.height;

 // 設(shè)置大圖偏移距離 因?yàn)槠涓冈卮嬖?overflow:hidden 所以只會展示對應(yīng)區(qū)塊
 maxImg.style.left = -(percentLeft*maxImg.clientWidth)+'px';
 maxImg.style.top = -(percentHeight*maxImg.clientHeight)+'px';
 };
 }

 var elem = document.querySelectorAll('.J_imgBox');

 elem.forEach(function(item,idx){
 imgZoom(item)
 })
 })()

<body >
<div id="testDiv" ></div>
<script>
(function(){
var elem = document.getElementById('testDiv');
document.body.addEventListener('click',function(){
console.log(elem.getBoundingClientRect())
},false)
})()
</script>
</body>

 <div id="aDiv">
 123
 <div id="bDiv">456</div>
 </div>

 document.getElementById('aDiv').addEventListener('click',function(e){
 if(e.target === e.currentTarget) {
 console.log('target === currentTarget')
 }else{
 console.log('target !== currentTarget')
 }
 console.log('target',e.target)
 console.log('currentTarget',e.currentTarget)
 },false)

 <div id="aDiv">
 123
 <div id="bDiv">456</div>
 </div>

 document.getElementById('aDiv').addEventListener('click',function(){
 console.log('click aDiv')
 },false)
 document.getElementById('bDiv').addEventListener('click',function(e){
 e.stopImmediatePropagation();
 console.log('click bDiv')
 },false)
 document.getElementById('bDiv').addEventListener('click',function(){
 console.log('click me too')
 },false)