js 实现商品放大镜效果
知识点，需熟悉下面属性及含义：
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>
好了商品内部放大镜效果就这样完成了，而且还带有边界检测。希望可以给有需要的人提供到帮助。
模拟效果图如下：
我要成为酷酷的人http://www.cnblogs.com/CooLLYP/
