淘寶圖片放大鏡
阿新 • • 發佈：2019-02-01
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .box { width: 350px; height: 350px; margin:100px; border: 1px solid #ccc; position: relative; } .big { width: 400px; height: 400px; position: absolute; top: 0; left: 360px; border: 1px solid #ccc; overflow: hidden; display: none; } .mask { width: 175px; height: 175px; background: rgba(255, 255, 0, 0.4); position: absolute; top: 0; left: 0; cursor: move; display: none; } .small { position: relative; } img { vertical-align: top; } </style> <script src="tools.js"></script> <script> window.onload = function () { //需求：滑鼠放到小盒子上，讓大盒子裡面的圖片和我們同步等比例移動。 //技術點：onmouseenter==onmouseover 第一個不冒泡 //技術點：onmouseleave==onmouseout 第一個不冒泡 //步驟： //1.滑鼠放上去顯示盒子，移開隱藏盒子。 //2.老三步和新五步（黃盒子跟隨移動） //3.右側的大圖片，等比例移動。 var box = document.getElementsByClassName("box")[0]; var small = box.children[0]; var big = box.children[1]; var mask = small.children[1]; var bigIma = big.children[0]; small.onmouseenter = function () { mask.style.display = "block"; big.style.display = "block"; } small.onmouseleave = function () { mask.style.display = "none"; big.style.display = "none"; } small.onmousemove = function (event) { event = event || window.event; var pageX = event.pageX || scroll().left + event.clientX; var pageY = event.pageY || scroll().top + event.clientY; var targetX = pageX - box.offsetLeft; var targetY = pageY - box.offsetTop; var x = targetX - mask.offsetWidth / 2; var y = targetY - mask.offsetHeight / 2; if( x < 0) { x = 0; } if( y < 0) { y = 0; } if( x > small.offsetWidth - mask.offsetWidth) { x = small.offsetWidth - mask.offsetWidth; } if( y > small.offsetHeight - mask.offsetHeight) { y = small.offsetHeight - mask.offsetHeight; } mask.style.left = x + "px"; mask.style.top = y + "px"; var scaleX = mask.offsetLeft / small.offsetWidth; var scaleY = mask.offsetTop / small.offsetHeight; bigIma.style.marginLeft = -(scaleX * bigIma.offsetWidth) + "px"; bigIma.style.marginTop = -(scaleY * bigIma.offsetHeight) + "px"; } //0.獲取相關元素 /*var box = document.getElementsByClassName("box")[0]; var small = box.firstElementChild || box.firstChild; var big = box.children[1]; var mask = small.children[1]; var bigImg = big.children[0]; //1.滑鼠放上去顯示盒子，移開隱藏盒子。(為小盒子繫結事件) small.onmouseenter = function () { //封裝好方法呼叫：顯示元素 show(mask); show(big); } small.onmouseleave = function () { //封裝好方法呼叫：隱藏元素 hide(mask); hide(big); } //2.老三步和新五步（黃盒子跟隨移動） //繫結的事件是onmousemove，而事件源是small(只要在小盒子上移動1畫素，黃盒子也要跟隨) small.onmousemove = function (event) { //想移動黃盒子，必須知道滑鼠在small中的位置。x作為mask的left值，y作mask的top值。 //新五步 event = event || window.event; var pagex = event.pageX || scroll().left + event.clientX; var pagey = event.pageY || scroll().top + event.clientY; //讓滑鼠在黃盒子最中間，減去黃盒子寬高的一半 var x = pagex - box.offsetLeft - mask.offsetWidth/2; var y = pagey - box.offsetTop - mask.offsetHeight/2; //限制換盒子的範圍 //left取值為大於0，小盒子的寬-mask的寬。 if(x<0){ x = 0; } if(x>small.offsetWidth-mask.offsetWidth){ x = small.offsetWidth-mask.offsetWidth; } //top同理。 if(y<0){ y = 0; } if(y>small.offsetHeight-mask.offsetHeight){ y = small.offsetHeight-mask.offsetHeight; } //移動黃盒子 console.log(small.offsetHeight); mask.style.left = x + "px"; mask.style.top = y + "px"; //3.右側的大圖片，等比例移動。 //如何移動大圖片？等比例移動。 // 大圖片/大盒子 = 小圖片/mask盒子 // 大圖片走的距離/mask走的距離 = （大圖片-大盒子）/（小圖片-黃盒子） // var bili = (bigImg.offsetWidth-big.offsetWidth)/(small.offsetWidth-mask.offsetWidth); //大圖片走的距離/mask盒子都的距離 = 大圖片/小圖片 var bili = bigImg.offsetWidth/small.offsetWidth; var xx = bili*x; var yy = bili*y; bigImg.style.marginTop = -yy+"px"; bigImg.style.marginLeft = -xx+"px"; }*/ } </script> </head> <body> <div class="box"> <div class="small"> <img src="images/001.jpg" alt=""/> <div class="mask"></div> </div> <div class="big"> <img src="images/0001.jpg" alt=""/> </div> </div> </body> </html>