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

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

阅读量：4117 次

发布时间：2019-05-25

本文共 3368 字，大约阅读时间需要 11 分钟。

640?wx_fmt=jpeg

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

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

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

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

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

具体效果如下：

640?wx_fmt=png

HTML代码如下：

			
     	原生js仿淘宝主图放大镜功能-www.webqdkf.com

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
     
      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

转载地址：http://fkfpi.baihongyu.com/

你可能感兴趣的文章