jquery完成一个电商网站的放大镜效果以及原理

淩亂°似流年 2021-09-16 00:52 261阅读 0赞

![70][]

鼠标拖动遮盖运动,右边大图随之移动,类似于淘宝中的放大镜效果

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		div{
    			float: left;
    		}
    		#big{
    			position: relative;
    			width: 400px;
    			height: 400px;
    			overflow: hidden;
    			border:1px solid;
    			display: none;
    		}
    		#small{
    			width: 350px;
    			height: 350px;
    			position: relative;
    			border:1px solid;
    		}
    		#mask{
    			position: absolute;
    			width: 175px;
    			height: 175px;
    			left:0;
    			top:0;
    			background: rgba(0,0,0,0.3);
    			display: none;
    		}
    		#maximg{
    			position: absolute;
    		}
    	</style>
    </head>
    <body>
    	<div id="small">
    		<img src="./1.jpg" alt="">
    		<div id="mask"></div>
    	</div>
    	<div id="big">
    		<img src="./2.jpg" alt="" id="maximg">
    	</div>
    </body>
    <script src="../../jquery.js"></script>
    <script>
    	//当鼠标出现在小图的时候,蒙版出现
    	$("#small").mouseover(function(e) {
    		//将mask显示
    		$("#big").slideDown(1000);
    		$("#mask").show();
    		$("#small").mousemove(function(e){
    			//获得当前鼠标的坐标点
    			var x = e.clientX-$("#mask").width()/2+"px";
    			var y = e.clientY-$("#mask").height()/2+"px";
    			// console.log(x,y);
    			$("#mask").css({"top":y,"left":x});
    			//边界的判断
    			var maxW = $("#small").outerWidth()-$("#mask").width();
    			var maxH = $("#small").outerHeight()-$("#mask").height();
    			var l = $("#mask").offset().left;
    			var t = $("#mask").offset().top;
    			if(l<0){
    				$("#mask").css("left","0px");
    			}
    			if(t<0){
    				$("#mask").css("top","0px");
    			}
    			if(l>=maxW){
    				$("#mask").css("left",maxW);
    			}
    			if(t>=maxH){
    				$("#mask").css("top",maxH);
    			}
    			//获得运动比例
    			var scaleX= ($("#mask").offset().left/maxW)*($("#big").outerWidth()-$("#maximg").width())+"px";
    			var scaleY= ($("#mask").offset().top/maxW)*($("#big").outerHeight()-$("#maximg").height())+"px";
    			$("#maximg").css("left",scaleX);
    			$("#maximg").css("top",scaleY);
    		})
    	});
    	$("#small").mouseleave(function(e) {
    		$("#big").slideUp(1000);
    		mask.style.display="none";
    
    	});
    
    </script>
    </html>

两个图片有相对应的比例关系

小图可移动的最大距离和大图可移动的最大距离是等比例的

所以:   小图移动的距离/小图最大移动距离 == 大图移动的距离/大图最大移动距离

[70]: /images/20210813/64d7cb19c1264efabd50410c2a307ae8.png