知識點，需熟悉下面屬性及含義：
offsetLeft //獲取元素相對左側的距離 （計算是從最左側邊框外開始）
offsetTop //獲取元素相對頂部的距離 （計算是從最頂部邊框外開始）
offsetWidth //獲取元素寬度 （border + padding + margin）
offsetHeight //獲取元素高度 （border +padding + margin）
clientLeft //測量的是元素左側邊框的寬度
clientHeight //測量的是元素的上邊框的寬度
clientWidht //獲取元素的寬度 不帶邊框（padding + margin）
clientHeight //獲取元素的高度 不帶邊框 （padding + margin）
第一種： 商品類
正文：現在很多pc端商城網站詳情頁面都使用的有放大鏡效果，那我們怎樣使用一張圖片實現放大鏡效果呢？具體代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #smallImg{ 12 width: 300px; 13 height: 300px; 14 position: relative; 15 } 16 #smallImg img{ 17 width: 300px; 18 height: 300px; 19 } 20 #lay{ 21 position: absolute; 22 left: 0; 23 top: 0; 24 border: 1px solid #666; 25 opacity: 0.6; 26 filter: alpha(opacity = 60); 27 background: #fff; 28 display: none; 29 cursor: move; 30 } 31 #bigImg{ 32 width: 300px; 33 height: 300px; 34 position: absolute; 35 left: 320px; 36 overflow: hidden; 37 top: 0; 38 display: none; 39 } 40 #bigImg img{ 41 position: absolute; 42 left: 0; 43 top: 0; 44 } 45 </style> 46 </head> 47 <body> 48 <div id="smallImg"> 49 <img src="img/1.jpg" alt=""> 50 <div id="lay"></div> 51 </div> 52 <div id="bigImg"> 53 <img src="img/1.jpg" alt=""> 54 </div> 55 <script> 56 window.onload = function(){ 57 var lay = getId("lay"), 58 smallImg = getId("smallImg"), 59 bigImg = getId("bigImg"); 60 var imgB = bigImg.children[0]; //大圖中的圖片 61 var scale = 4; //縮放倍數 可調整 62 var w = smallImg.offsetWidth; //小圖的寬高 63 var h = smallImg.offsetHeight; 64 lay.style.width = w / scale + "px"; 65 lay.style.height = h / scale + "px"; 66 67 imgB.style.width = w * scale + "px"; 68 imgB.style.height = h * scale + "px"; 69 smallImg.onmouseover = function(){ 70 lay.style.display = "block"; 71 bigImg.style.display = "block"; 72 } 73 smallImg.onmouseout = function(){ 74 lay.style.display = "none"; 75 bigImg.style.display = "none"; 76 } 77 smallImg.onmousemove = function(e){ 78 e = e || window.event; 79 var x = e.clientX - lay.offsetWidth/2; 80 var y = e.clientY - lay.offsetHeight/2; 81 if(x <= 0){ //左側邊界判斷 82 x = 0; 83 } 84 if(y <= 0){ //頂部邊界判斷 85 y = 0; 86 } 87 if(x >= smallImg.offsetWidth - lay.offsetWidth ){ 88 x = smallImg.offsetWidth - lay.offsetWidth //右側邊界判斷 89 } 90 if(y >= smallImg.offsetHeight - lay.offsetHeight ){ 91 y = smallImg.offsetHeight - lay.offsetHeight //底部邊界判斷 92 } 93 lay.style.left = x + "px"; 94 lay.style.top = y + "px"; 95 imgB.style.left = -x*scale + "px"; //圖片默認位置為0 0左上角位置 需要反向才能兩者相對顯示 96 imgB.style.top = -y*scale + "px"; 97 } 98 } 99 function getId(id){ 100 return document.getElementById(id); 101 } 102 </script> 103 </body> 104 </html>
好了商品外部放大鏡效果就這樣完成了，而且還帶有邊界檢測。希望可以給有需要的人提供到幫助。
模擬效果圖如下：
第二種： 商品內部實現放大效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>測試放大鏡</title> 5 <style type="text/css"> 6 *{ 7 margin: 0; 8 padding: 0; 9 } 10 #small_Box{ 11 width: 300px; 12 height: 300px; 13 position: relative; 14 margin: 50px auto; 15 } 16 #small_Box img{ 17 width: 100%; 18 height: 100%; 19 } 20 </style> 21 </head> 22 <body> 23 <div id="small_Box"><img src="1.jpg"></div> 24 <script type="text/javascript"> 25 window.onload = function() { 26 var span = document.createElement("span"); 27 var box = document.getElementById("small_Box"); 28 var img = document.createElement("img"); 29 var boxWidth = box.clientWidth; 30 var boxHeight = box.clientHeight; 31 var scale = 2; 32 span.style.position = "absolute"; 33 span.style.width = boxWidth / scale+"px"; 34 span.style.height = boxHeight / scale+"px"; 35 span.style.display = 'none'; 36 span.style.overflow = 'hidden'; 37 span.style.backgroundColor = "rgba(255, 255, 255, 0.5)"; 38 span.style.cursor = 'pointer'; 39 box.appendChild(span); 40 img.setAttribute("src", "1.jpg"); 41 img.style.width = scale*boxWidth + "px"; 42 img.style.height = scale*boxHeight + "px"; 43 box.onmouseover = function(e){ 44 span.style.display = "block"; 45 } 46 box.onmousemove = function(e){ 47 e = e || window.event; 48 var x = e.clientX - span.clientWidth / scale - this.offsetLeft; 49 var y = e.clientY - span.clientHeight / scale - this.offsetTop; 50 if (x <= 0){ 51 x = 0 52 } 53 if (x >= box.clientWidth - span.clientWidth){ 54 x = box.clientWidth - span.clientWidth 55 } 56 if (y <= 0){ 57 y = 0 58 } 59 if (y >= box.clientHeight - span.clientHeight){ 60 y = box.clientHeight - span.clientHeight 61 } 62 span.style.left = x + "px"; 63 span.style.top = y + "px"; 64 65 img.style.marginLeft = -1 * span.offsetLeft * scale - x + "px"; 66 img.style.marginTop = -1 * span.offsetTop * scale - y + "px"; 67 span.appendChild(img); 68 } 69 70 box.onmouseout = function(e){ 71 span.style.display = "none"; 72 } 73 } 74 </script> 75 </body> 76 </html>
好了商品內部放大鏡效果就這樣完成了，而且還帶有邊界檢測。希望可以給有需要的人提供到幫助。
模擬效果圖如下：
