【每日一练】原生js仿淘宝主图放大镜功能，附学习源码

最新推荐文章于 2022-07-07 15:45:10 发布

web前端开发V

最新推荐文章于 2022-07-07 15:45:10 发布

阅读量721

点赞数

640?wx_fmt=jpeg

在我们的项目中，经常会遇到各种功能效果的实现，对于每一项功能的实现方式，都有很多种，这些实现方式没有好坏之分，只有适合与否，但是我个人建议，如果项目急就选择自己擅长的方式实现，比较完成工作更加重要嘛。

如果项目不急，你又想开拓并尝试一些新方式方法，你可以花点时间去研究一下新的方法，或者说最优方案。

从今天开始，我们推出，【每日一练】专栏，这个专栏主要以分享一些前端样式效果的实现为主，我们一般分享一种方案，你也可以通过练习，把你实现的功能效果，通过留言区上交你的练习作品。

今天我要跟大家分享的是一个原生JS仿淘宝商品主图放大镜的效果。这个在写商城项目的时候，会经常用到。

点击小图切换对应的大图，当鼠标悬停大图时，商品图片局部放大。这款放大镜图片封装在js里面，需要修改js里面的图片路径就可以完成你想要的效果，同时还兼容IE低版本浏览器。

具体效果如下：

640?wx_fmt=png

HTML代码如下：

<!DOCTYPE html>	
<html lang="en">	
<head>	
<meta charset="UTF-8" />	
<title>原生js仿淘宝主图放大镜功能-www.webqdkf.com</title>	
<link rel="stylesheet" type="text/css" href="css/style.css">	
<script type="text/javascript" src="js/tools.js"></script>	
<script type="text/javascript" src="js/move.js"></script>	
</head>	
<body>	
<div class="wrap">	
  <div class="biger" id="biger"></div>	
  <div class="imgs">	
    <div class="main" id="main">	
      <div class="mask" id="mask"></div>	
    </div>	
    <ul class="smaller" id="smaller"></ul>	
  </div>	
</div>	
</body>	
</html>

CSS如下：

@charset "utf-8";	
body,ul {	
  padding: 0;	
  margin: 0;	
}	
ul {	
  list-style: none;	
}	
img {	
  vertical-align: middle;	
  width: 100%;	
  height: 100%;	
}	
.wrap {	
  position: relative;	
  top: 100px;	
  left: 100px;	
  width: 400px;	
  height: 492px;	
}	
.imgs {	
  position: absolute;	
  left: 0;	
  top: 0;	
  width: 100%;	
  height: 100%;	
}	
.main {	
  position: relative;	
  overflow: hidden;	
  padding: 4px;	
  width: 390px;	
  height: 390px;	
  border: 1px solid #dadada;	
}	
.smaller {	
  position: relative;	
  overflow: hidden;	
  width: 400px;	
  height: 82px;	
  margin-top: 10px;	
}	
.smaller li {	
  position: relative;	
  float: left;	
  padding: 2px;	
  width: 64px;	
  height: 64px;	
  border: 2px solid #000;	
  margin-left: 10px;	
  cursor: pointer;	

	
}	
.smaller li:first-child {	
  margin-left: 0;	
}	
.smaller .current {	
  border-color: #ff6a00;	
}	
.biger {	
  position: absolute;	
  overflow: hidden;	
  display: none;	
  left: 410px;	
  width: 400px;	
  height: 400px;	
}	
.mask {	
  position: absolute;	
  display: none;	
  left: 0;	
  top: 0;	
  width: 200px;	
  height: 200px;	
  background: url('../images/mask-bg.png') repeat;	
  cursor: crosshair;	
}	
.biger img {	
  position: absolute;	
  left: 0;	
  top: 0;	
  width: 200%;	
  height: 200%;	
}

在HTML中，我们可以看到，里面有两个JS文件move.js与tools.js，以下是move.js源码。

window.onload=function(){	
    var biger=document.getElementById('biger');	
    var main=document.getElementById('main');	
    var smaller=document.getElementById('smaller');	
    var mask=document.getElementById('mask');	
    var wrap=biger.parentNode;	
    var imgArr=[	
        {"path":"images/banner1.jpg"},	
        {"path":"images/banner2.jpg"},	
        {"path":"images/banner3.jpg"},	
        {"path":"images/banner4.jpg"},	
        {"path":"images/banner5.jpg"}	
    ];	
    var imgSum=imgArr.length;	
    if(imgSum>5){	
        imgSum=5;	
    }	
    for (var i=0;i<imgSum;i++) {	
        var lis=document.createElement('li');	
        var imgs=document.createElement('img');	
        imgs.src=imgArr[i].path;	
        lis.appendChild(imgs);	
        smaller.appendChild(lis);	
    }	
    var mainImg=document.createElement('img');	
    var bigImg=document.createElement('img');	
    var liArr=smaller.children;	
    bigImg.src=mainImg.src=liArr[0].children[0].src;	
    main.insertBefore(mainImg,mask);	
    biger.appendChild(bigImg);	
    var bigPic=biger.children[0];	
    liArr[0].className='current';	
    for (var i=0;i<liArr.length;i++) {	
        liArr[i].index=i;	
        liArr[i].onclick=function(){	
            this.className='current';	
            bigPic.src=main.children[0].src=this.children[0].src;	
            for (var j = 0; j < liArr.length; j++) {	
                if(this!=liArr[j]){	
                    liArr[j].removeAttribute('class');	
                    liArr[j].removeAttribute('className');	
                }	
            }	
        }	
    }	
    main.onmouseenter=function(){	
        mask.style.display='block';	
        biger.style.display='block';	
    }	
     main.onmouseleave=function(){	
        mask.style.display='none';	
        biger.style.display='none';	
    }	
    main.onmousemove=function(e){	
        var e = e || window.event;	
        var pagex=e.pageX || scroll().left+e.clientX;	
        var pagey=e.pageY || scroll().top+e.clientY;	
        pagex=pagex-wrap.offsetLeft-mask.offsetWidth/2;;	
        pagey=pagey-wrap.offsetTop-mask.offsetHeight/2;	
        if(pagex<0){	
            pagex=0;	
        }	
        if(pagey<0){	
            pagey=0;	
        }	
        if(pagex>main.offsetWidth-mask.offsetWidth){	
            pagex=main.offsetWidth-mask.offsetWidth;	
        }	
         if(pagey>main.offsetHeight-mask.offsetHeight){	
            pagey=main.offsetHeight-mask.offsetHeight;	
        }	
        mask.style.left=pagex+'px';	
        mask.style.top=pagey+'px';	
        var scale=(bigPic.offsetWidth-biger.offsetWidth)/(main.offsetWidth-mask.offsetWidth);	
        var xx=pagex*scale;	
        var yy=pagey*scale;	
        bigPic.style.left=-xx+'px';	
        bigPic.style.top=-yy+'px';	
    }	
}

tools.js文件源码如下：

// 屏幕滚动	
function scroll(){	
  if(window.pageXOffset!=undefined){	
    return {	
      "left":window.pageXOffset,	
      "top":window.pageYOffset	
    }	
  }else if(document.compatMode!='BackCompat'){	
    return {	
      "left":document.body.scrollLeft,	
      "top":document.body.scrollTop	
    }	
  }else {	
    return {	
      "left":document.documentElement.scrollLeft,	
      "top":document.documentElement.scrollTop	
    }	
  }	
}

最后，也欢迎你分享你的实现方式，在留言区与大家进行交流学习。

640?wx_fmt=jpeg

web前端开发V

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
【每日一练】原生js仿淘宝主图放大镜功能，附学习源码

在我们的项目中，经常会遇到各种功能效果的实现，对于每一项功能的实现方式，都有很多种，这些实现方式没有好坏之分，只有适合与否，但是我个人建议，如果项目急就选择自己擅长的方式...
复制链接

扫一扫