jquery完成一个电商网站的放大镜效果

鼠标拖动遮盖运动,右边大图随之移动,类似于淘宝中的放大镜效果
<!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>
jquery完成一个电商网站的放大镜效果

猜你喜欢
