js 实现商品放大镜效果

知识点，需熟悉下面属性及含义：

offsetLeft //获取元素相对左侧的距离（计算是从最左侧边框外开始）

offsetTop //获取元素相对顶部的距离（计算是从最顶部边框外开始）

offsetWidth //获取元素宽度（border + padding + margin）

offsetHeight //获取元素高度（border +padding + margin）

clientLeft //测量的是元素左侧边框的宽度

clientHeight //测量的是元素的上边框的宽度

clientWidht //获取元素的宽度不带边框（padding + margin）

clientHeight //获取元素的高度不带边框（padding + margin）

第一种：商品类

正文：现在很多pc端商城网站详情页面都使用的有放大镜效果，那我们怎样使用一张图片实现放大镜效果呢？具体代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         #smallImg{

             width: 300px;

             height: 300px;

             position: relative;

         }

         #smallImg img{

             width: 300px;

             height: 300px;

         }

         #lay{

             position: absolute;

             left: 0;

             top: 0;

             border: 1px solid #666;

             opacity: 0.6;

             filter: alpha(opacity = 60);

             background: #fff;

             display: none;

             cursor: move;

         }

         #bigImg{

             width: 300px;

             height: 300px;

             position: absolute;

             left: 320px;

             overflow: hidden;

             top: 0;

             display: none;

         }

         #bigImg img{

             position: absolute;

             left: 0;

             top: 0;

         }

     </style>

 </head>

 <body>

     <div id="smallImg">

         <img src="img/1.jpg" alt="">

         <div id="lay"></div>

     </div>

     <div id="bigImg">

         <img src="img/1.jpg" alt="">

     </div>

     <script>

         window.onload = function(){

             var lay = getId("lay"),

                 smallImg = getId("smallImg"),

                 bigImg = getId("bigImg");

             var imgB = bigImg.children[0]; //大图中的图片

             var scale = 4;        //缩放倍数  可调整

             var w = smallImg.offsetWidth; //小图的宽高

             var h = smallImg.offsetHeight;

             lay.style.width = w / scale + "px";

             lay.style.height = h / scale + "px";

             imgB.style.width = w * scale + "px";

             imgB.style.height = h * scale + "px";

             smallImg.onmouseover = function(){

                 lay.style.display = "block";

                 bigImg.style.display = "block";

             }

             smallImg.onmouseout = function(){

                 lay.style.display = "none";

                 bigImg.style.display = "none";

             }

             smallImg.onmousemove = function(e){

                 e = e || window.event;

                 var x = e.clientX - lay.offsetWidth/2;

                 var y = e.clientY - lay.offsetHeight/2;

                 if(x <= 0){            //左侧边界判断

                     x = 0;

                 }

                 if(y <= 0){            //顶部边界判断

                     y = 0;

                 }

                 if(x >= smallImg.offsetWidth - lay.offsetWidth ){

                     x = smallImg.offsetWidth - lay.offsetWidth        //右侧边界判断

                 }

                 if(y >= smallImg.offsetHeight - lay.offsetHeight ){

                     y = smallImg.offsetHeight - lay.offsetHeight        //底部边界判断

                 }

                 lay.style.left = x + "px";

                 lay.style.top = y + "px";

                 imgB.style.left = -x*scale + "px";    //图片默认位置为0 0左上角位置 需要反向才能两者相对显示

                 imgB.style.top = -y*scale + "px";

             }

         }

         function getId(id){

             return document.getElementById(id);

         }

     </script>

 </body>

 </html>

好了商品外部放大镜效果就这样完成了，而且还带有边界检测。希望可以给有需要的人提供到帮助。

模拟效果图如下：

第二种：商品内部实现放大效果

 <!DOCTYPE html>

 <html>

 <head>

     <title>测试放大镜</title>

     <style type="text/css">

         *{

             margin: 0;

             padding: 0;

         }

         #small_Box{

             width: 300px;

             height: 300px;

             position: relative;

             margin: 50px auto;

         }

         #small_Box img{

             width: 100%;

             height: 100%;

         }

     </style>

 </head>

 <body>

     <div id="small_Box"><img src="1.jpg"></div>

     <script type="text/javascript">

         window.onload = function() {

             var span = document.createElement("span");

             var box = document.getElementById("small_Box");

             var img = document.createElement("img");

             var boxWidth = box.clientWidth;

             var boxHeight = box.clientHeight;

             var scale = 2;

             span.style.position = "absolute";

             span.style.width = boxWidth / scale+"px";

             span.style.height = boxHeight / scale+"px";

             span.style.display = 'none';

             span.style.overflow = 'hidden';

             span.style.backgroundColor = "rgba(255, 255, 255, 0.5)";

             span.style.cursor = 'pointer';

             box.appendChild(span);

             img.setAttribute("src", "1.jpg");

             img.style.width = scale*boxWidth + "px";

             img.style.height = scale*boxHeight + "px";

             box.onmouseover = function(e){

                 span.style.display = "block";

             }

             box.onmousemove = function(e){

                 e = e || window.event;

                 var x = e.clientX - span.clientWidth / scale - this.offsetLeft;

                 var y = e.clientY - span.clientHeight / scale - this.offsetTop;

                 if (x <= 0){

                     x = 0

                 }

                 if (x >= box.clientWidth - span.clientWidth){

                     x = box.clientWidth - span.clientWidth

                 }

                 if (y <= 0){

                     y = 0

                 }

                 if (y >= box.clientHeight - span.clientHeight){

                     y = box.clientHeight - span.clientHeight

                 }

                 span.style.left = x + "px";

                 span.style.top = y + "px";

                 img.style.marginLeft = -1 * span.offsetLeft * scale - x + "px";

                 img.style.marginTop = -1 * span.offsetTop * scale - y + "px";

                 span.appendChild(img);

             }

             box.onmouseout = function(e){

                 span.style.display = "none";

             }

         }

     </script>

 </body>

 </html>

好了商品内部放大镜效果就这样完成了，而且还带有边界检测。希望可以给有需要的人提供到帮助。

模拟效果图如下：

巴特西

js 实现商品放大镜效果

最新文章

热门文章