原生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 wrapleft=document.getElementById("wrapleft");
	var wrapright=document.getElementById("wrapright");
	var MoverGlass=document.getElementById("MoverGlass");
	var bigg=document.getElementById("bigg");
	var biggimg=bigg.getElementsByTagName("img")[0];
	var smallg=document.getElementsByClassName(‘smallg‘);
	var Myeye=document.getElementById("Myeye");
	for(var i=0;i<smallg.length;i++){
		(function(index){
			smallg[index].addEventListener("mouseover",function(){
				src=smallg[index].getElementsByTagName("img")[0].src;
				biggimg.src=src;
				Myeye.src=src;
			},false)
		})(i)
	}
	bigg.addEventListener("mouseover",function(){
		MoverGlass.style.display="block";
		wrapright.style.display="block";
	},false)
	bigg.addEventListener("mouseout",function(){
		MoverGlass.style.display="none";
		wrapright.style.display="none";
	},false)
	bigg.addEventListener("mousemove",function(e){
		var event=e||window.event;
		var scrollTop=document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;
		var scrollLeft=document.documentElement.scrollLeft||window.pageXOffset||document.body.scrollLeft;
		var x=event.clientX;
		var y=event.clientY;
		var X=x-wrapleft.offsetLeft+scrollLeft-MoverGlass.offsetWidth/2;
		var Y=y-wrapleft.offsetTop+scrollTop-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";
		Myeye.style.left=-X/bigg.offsetWidth*Myeye.offsetWidth+"px";
		Myeye.style.top=-Y/bigg.offsetHeight*Myeye.offsetHeight+"px";
	},false)
</script>

以上是关于原生js淘宝放大镜效果(第二版)的主要内容，如果未能解决你的问题，请参考以下文章