淘寶商品放大鏡效果
阿新 • • 發佈：2020-07-18
效果圖：
程式碼如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Document</title> </head> <style> .box{ width: 402px; height:500px; border:2px solid #00f; position: relative; margin:50px; } .middle{ width: 400px; height: 400px; border:1px solid #000; position: relative; } .small{ margin-top:10px; } .small img{ border:1px solid #000; margin-left:10px; } .middle .shade{ position: absolute; left:0; top:0; background-color: rgba(255,255,0,0.4); width: 200px; height: 200px; display:none; } .big{ width: 400px; height: 400px; border:1px solid #f00; position: absolute; left:105%; top:0; background-image: url("./images/big1.jpg"); background-size:800px 800px; display:none; } </style> <body> <div style="height:300px;"></div> <div class="box"> <div class="middle"> <img src="./images/middle1.jpg" alt=""> <div class="shade"></div> </div> <div class="small"> <img src="./images/small1.jpg" alt=""> <img src="./images/small2.jpg" alt=""> <img src="./images/small3.jpg" alt=""> </div> <div class="big"></div> </div> </body> <script type="text/javascript"> function Enlarge(classname){ this.box = document.querySelector("."+classname); this.smallImgs = this.box.querySelectorAll(".small img"); this.middleImg = this.box.querySelector(".middle>img"); this.big = this.box.querySelector(".big"); this.middle = this.box.querySelector(".middle"); this.shade = this.box.querySelector(".shade"); this.smallImgs[0].style.borderColor = 'red' } Enlarge.prototype.init = function(){ // 給所有的小圖片繫結單擊事件 for(let i=0;i<this.smallImgs.length;i++){ this.smallImgs[i].onclick = ()=>{ this.smallImgClick(i) } } // 給中等盒子繫結滑鼠移入事件 this.middle.onmouseover = ()=>{ this.shade.style.display = 'block'; // 大盒子悉尼市 this.big.style.display = 'block'; // 給中等盒子新增滑鼠移動事件 this.middle.onmousemove = e=>{ this.move() } } // 移出事件 this.middle.onmouseout = ()=>{ this.shade.style.display = 'none'; this.big.style.display = 'none'; } } Enlarge.prototype.move = function(){ var e = e || window.event; // 當使用offsetX和offsetY對div進行賦值left和top的時候，效果是一閃一閃的，因為當獲取到游標在中等盒子上的位置，給遮罩進行改變left和top的時候，offsetX和offsetY的值就變成游標在遮罩上的offsetX和offsetY*/ var x = e.pageX; var y = e.pageY; this.setShadeMove(x,y) this.setBigImgMove(); } Enlarge.prototype.setBigImgMove = function(){ // 計算遮罩在中等盒子上移動過的比例：移動過的距離/中等盒子的尺寸 var xpercent = this.shade.offsetLeft/this.middle.clientWidth; var ypercent = this.shade.offsetTop/this.middle.clientHeight; // 使用這個比例計算大盒子上的背景圖移動的距離：比例*背景圖的尺寸 // 獲取大盒子的背景圖的寬和高 var bigBgSize = getStyle(this.big,"background-size") // console.log(bigBgSize); var bigBgWidth = parseFloat(bigBgSize.split(" ")[0]) var bigBgHeight = parseFloat(bigBgSize.split(" ")[1]) var bigLeft = xpercent * bigBgWidth var bigTop = ypercent * bigBgHeight // 根據這個距離設定大盒子的背景圖的位置 this.big.style.backgroundPosition = `-${bigLeft}px -${bigTop}px` } Enlarge.prototype.setShadeMove = function(x,y){ var l = x - this.box.offsetLeft - this.shade.offsetWidth/2 var t = y - this.box.offsetTop - this.shade.offsetHeight/2 if(l<=0){ l = 0; } if(t<=0){ t = 0; } if(l>=this.middle.clientWidth - this.shade.offsetWidth){ l=this.middle.clientWidth - this.shade.offsetWidth } if(t>=this.middle.clientHeight - this.shade.offsetHeight){ t=this.middle.clientHeight - this.shade.offsetHeight } this.shade.style.left = l + "px" this.shade.style.top = t + "px" } Enlarge.prototype.smallImgClick = function(i){ // 將所有小圖片的邊框顏色改成黑色 for(var j=0;j<this.smallImgs.length;j++){ this.smallImgs[j].style.borderColor = '#000'; } // 將當前點選的這個圖片的邊框顏色變成紅色 this.smallImgs[i].style.borderColor = 'red'; // 獲取當前點選的這個小圖片的路徑，看看是1.jpg還是2.jpg - 改變中等圖片 var smallImgPath = this.smallImgs[i].getAttribute("src"); // 擷取到 數字.jpg // 找點最後一次出現的位置 var index = smallImgPath.lastIndexOf(".") var suffix = smallImgPath.slice(index-1) // 拼接中等圖片的路徑 var middleImgPath = "./images/middle"+suffix; // 設定中等圖片的路徑 this.middleImg.setAttribute("src",middleImgPath) // 拼接大圖的路徑 var bigImgPath = "./images/big"+suffix; // 使用大圖的路徑修改大盒子的背景 this.big.style.backgroundImage = `url("${bigImgPath}")`; } var e = new Enlarge("box"); e.init() function getStyle(ele,attr){ if(window.getComputedStyle){ return window.getComputedStyle(ele)[attr] }else{ return ele.currentStyle[attr]; } } </script> </html>