淘寶京東放大圖
阿新 • • 發佈：2019-02-03
//實現效果： //滑鼠放到小圖片上面的時候，後面的大盒子出現。滑鼠離開的時候大盒子隱藏。 //滑鼠移動的時候，大盒子內的大圖片也移動。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .box{ width: 400px; height: 400px; border: 1px solid #ccc; margin: 100px; position: relative; } .big{ width: 400px; height: 400px; border: 1px solid #ccc; display: none; position: absolute; top: 0; left: 410px; overflow: hidden; } .small>img{ width: 400px; height: 400px; } #fang{ width: 200px; height: 200px; background: black; opacity: 0.1; position: absolute; top: 0; left: 0; display: none; cursor: move; } </style> </head> <body> <div class="box"> <div class="samll"> <img src="image/da1.jpg" alt=""> <div id="fang"></div> </div> <div class="big"> <img src="image/da.jpg" alt=""> </div> </div> <script> //實現效果： //滑鼠放到小圖片上面的時候，後面的大盒子出現。滑鼠離開的時候大盒子隱藏。 //滑鼠移動的時候，大盒子內的大圖片也移動。 var small = document.getElementsByClassName('samll')[0]; var oimg = document.getElementsByClassName('samll')[0].getElementsByTagName("img")[0]; var big = document.getElementsByClassName('big')[0]; var mask = document.getElementById('fang'); var box = document.getElementsByClassName('box')[0]; var img = big.children[0]; small.onmouseover = function () { big.style.display = 'block';//滑鼠放上的時候，大盒子出現; mask.style.display = 'block';//與滑鼠同步的放大鏡也同時出現; } small.onmouseout = function () {//滑鼠離開的時候，與上面的效果反之。 big.style.display = 'none'; mask.style.display = 'none'; } small.onmousemove = function (ev) { //如果mask的到父元素左邊的值大於 其父元素的寬度減去放大鏡的寬度。就都等於父元素的寬度-mask的寬度。 //放大鏡的橫座標的值 等於當前滑鼠的橫座標值減去box到其父元素左邊（即瀏覽器）減去放大鏡寬度的一半， //滑鼠始終保持在放大鏡的中央。 var even=ev||window.event; var le=even.clientX-box.offsetLeft; var to=even.clientY-box.offsetTop; mask.style.left =le-mask.offsetWidth/2+'px'; mask.style.top = to-mask.offsetHeight/2+'px'; //防止放大鏡溢位 小圖片盒子 //放大鏡到父元素的左邊的距離 如果大於 小圖片的寬度 減去放大鏡的寬度 即表示放大鏡溢位 // 則令其等於 小圖片的寬度 減去放大鏡的寬度 if(mask.offsetLeft>oimg.offsetWidth-mask.offsetWidth){ mask.style.left = (oimg.offsetWidth-mask.offsetWidth)+'px'; //放大鏡的Left的值如果為負，就為零 }else if(mask.offsetLeft<=0){ mask.style.left = 0+'px'; //縱座標 同理 }if(mask.offsetTop>oimg.offsetHeight-mask.offsetHeight){ mask.style.top = (oimg.offsetHeight-mask.offsetHeight)+'px'; }else if(mask.offsetTop<=0){ mask.style.top = 0+'px'; } var numX = img.offsetWidth/oimg.offsetWidth; // 大圖片的實際寬高除以小圖片的實際寬高 var numY = img.offsetHeight/oimg.offsetHeight; //移動時 大圖片移動的距離 應是 滑鼠移動距離 放大鏡到父元素的距離乘以大圖片寬高除以小圖片寬高 // 加+-就是為了使左右移動時都可以 img.style.transform = "translateX("+-mask.offsetLeft*numX+"px"+")" +"translateY("+-mask.offsetTop*numY+"px"+")"; } </script> </body> </html>