原生JS实现简单的淘宝放大镜效果

Posted 2020-07-31

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JS实现简单的淘宝放大镜效果相关的知识，希望对你有一定的参考价值。

大家经常去淘宝买东西会发现,淘宝上的放大镜效果挺有意思的,这里简单的实现了下,代码中的图片地址亲们可以自行更换;

<!DOCTYPE html>
<html>
<head>
	<title>放大镜</title>
	<meta charset="utf-8" />
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			height: 2000px;
		}
		#wrapleft{
			width: 300px;
			height: 400px;
			background: skyblue;
			box-shadow: 2px 2px 2px 2px gray;
			position: absolute;
			left: 100px;
			top: 100px;
		}
		.smallg{
			width: 70px;
			height: 99px;
			float: left;
			margin-left: 5px;
		}
		.smallg img{
			width: 70px;
			height: 99px;
		}
		.smallg:hover{
			box-shadow: 2px 2px 2px 2px gray;
		}
		#bigg{
			width: 300px;
			height: 300px;
			position: relative;
		}
		#bigg img{
			width: 300px;
			height: 300px;
		}
		#MoverGlass{
			width: 100px;
			height: 100px;
			position: absolute;
			background-color: rgba(0,0,0,0.5);
			left: 0;
			top: 0;
			display: none;
		}
		#wrapright{
			width: 400px;
			height: 400px;
			position: absolute;
			display: none;
			background-color: yellowgreen;
			left: 420px;
			top: 100px;
			overflow: hidden;
		}
		#Myeye{
			width: 1200px;
			height: 1200px;
			position: absolute;
			left: 0;
			top: 0;
			display: block;
		}
	</style>
</head>
<body>
	<div id="wrapleft">
		<div id="bigg">
			<img src="https://img.alicdn.com/imgextra/i1/5/TB2JKUbpVXXXXacXXXXXXXXXXXX_!!5-0-yamato.jpg_210x1000q90.jpg">
			<div id="MoverGlass">
			</div>
		</div>
		<div class="smallg"><img src="https://img.alicdn.com/imgextra/i1/5/TB2JKUbpVXXXXacXXXXXXXXXXXX_!!5-0-yamato.jpg_210x1000q90.jpg"></div>
		<div class="smallg"><img src="https://gd1.alicdn.com/imgextra/i1/2621336145/TB2Vc3ogFXXXXX9XXXXXXXXXXXX_!!2621336145.jpg"></div>
		<div class="smallg"><img src="https://img.alicdn.com/imgextra/i1/2621336145/TB22k_8gFXXXXXeXpXXXXXXXXXX_!!2621336145.jpg"></div>
		<div class="smallg"><img src="https://img.alicdn.com/imgextra/i2/2621336145/TB2YSDHlpXXXXarXXXXXXXXXXXX_!!2621336145.jpg"></div>
	</div>
	<div id="wrapright">
		<img src="ihttps://img.alicdn.com/imgextra/i1/5/TB2JKUbpVXXXXacXXXXXXXXXXXX_!!5-0-yamato.jpg_210x1000q90.jpg" id="Myeye">
	</div>
</body>
</html>
<script type="text/javascript">
	var smallg=document.getElementsByClassName(‘smallg‘);
	var MoverGlass=document.getElementById(‘MoverGlass‘);
	var bigg=document.getElementById("bigg");
	var biggimg=bigg.getElementsByTagName(‘img‘)[0];
	var wrapleft=document.getElementById("wrapleft");
	var wrapright=document.getElementById("wrapright");
	var Myeye=document.getElementById("Myeye");
//小图切换
	for(var i=0;i<smallg.length;i++){
		smallg[i].index=i;
		smallg[i].onmouseover=function (){
			src=this.getElementsByTagName("img")[0].src;
			biggimg.src=src;
			Myeye.src=src;
		}
	}
//遮罩层和显示层的显示与否
	bigg.onmouseover=function(){
		MoverGlass.style.display="block";
		wrapright.style.display="block";
	}
	bigg.onmouseout=function(){
		MoverGlass.style.display="none";
		wrapright.style.display="none";
	}
//遮罩层运动
	bigg.onmousemove=function(evt){
		var evt=event||evt;
		var scrollTop=document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;
		var scrollLeft=document.documentElement.scrollLeft||window.pageXOffset||document.body.scrollLeft;
		var x=evt.clientX+scrollLeft-wrapleft.offsetLeft-MoverGlass.offsetWidth/2; 
		var y=evt.clientY+scrollTop-wrapleft.offsetTop-MoverGlass.offsetHeight/2;

		if(x<=0){
			x=0;
		}
		if(x>=bigg.offsetWidth-MoverGlass.offsetWidth){
			x=bigg.offsetWidth-MoverGlass.offsetWidth;
		}
		if(y<=0){
			y=0;
		}
		if(y>=bigg.offsetHeight-MoverGlass.offsetHeight){
			y=bigg.offsetHeight-MoverGlass.offsetHeight;
		}
		MoverGlass.style.left=x+"px";
		MoverGlass.style.top=y+"px";
//计算显示层坐标
		var b=MoverGlass.offsetLeft/MoverGlass.offsetWidth*wrapright.offsetWidth;
		var a=MoverGlass.offsetTop/MoverGlass.offsetHeight*wrapright.offsetHeight;
		Myeye.style.left=-b+"px";
		Myeye.style.top=-a+"px";
	}
</script>

以上是关于原生JS实现简单的淘宝放大镜效果的主要内容，如果未能解决你的问题，请参考以下文章

js代码实现放大镜效果

原生js--实现放大镜效果

JS实现淘宝商品图片放大效果（放大镜）