最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

 /* 圖片容器 */
 .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; /* 絕對(duì)位置，先放遠(yuǎn)些 */
 left: -9999px; /* 絕對(duì)位置，先放遠(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ī)則如上 */
 }

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

 // 取大圖url，不知道淘寶圖片規(guī)則如何，反正看了詳情頁(yè)的大圖和小圖url對(duì)比，隨便寫(xiě)了個(gè)替換
 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)移動(dòng)事件
 imgContainer.onmousemove = function(event) {
 event.stopPropagation();

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

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

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

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

 // 遮罩塊在最左邊的時(shí)候，鼠標(biāo)仍在圖片區(qū)域內(nèi)，可在遮罩塊左邊緣至中心線(xiàn)區(qū)域內(nèi)移動(dòng)，且這時(shí)遮罩塊為距左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ì)算大圖偏移距離，展示遮罩塊所對(duì)應(yīng)的圖片區(qū)域
 var percentLeft = pointerLeft/clientRect.width;
 var percentHeight = pointerTop/clientRect.height;

 // 設(shè)置大圖偏移距離 因?yàn)槠涓冈卮嬖?overflow:hidden 所以只會(huì)展示對(duì)應(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)
 })
 })()

 

 123
 
456
 

 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)

 

 123
 
456
 

 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)