jQuery放大镜

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin:0px;
			padding: 0px
		}
		.ll{
			position: relative;
			display: inline-block;
			border:1px solid gray;
			width: 350px;
			height: 350px;
			float: left;
		}
		.ll img{
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 2;

		}
		.rr{
			display: inline-block;
			width: 500px;
			height: 500px;
			border:1px solid gray;
			overflow: hidden;
			position: relative;
			float: left;
		}
		.yed{
			float: left;
			width: 125px;
			height: 125px;
			background: yellow;
			opacity: 0.5;
			display: none;
			position: absolute;
			z-index: 999;
		}
		.rr img{
			position: absolute;
		}
	</style>
</head>
<body>
	<div class="ll">
		<span class="yed"></span>
		<img src="image/5ae19b0eN9fa5ceae.jpg"/>
	</div>
	<span class="rr">
		<img src="image/5ae19b0eN9fa5ceae (1).jpg"/>
	</span>
</body>
	<script type="text/javascript" src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(".rr").hide();
		//移动到小盒子上
		$(".ll").mouseover(function(e){
			//使黄色盒子显示出来
			$(".yed").show();
			//使右边那个大盒子显示出来
			$(".rr").show();
			//实现鼠标的位置位黄色盒子的中心坐标
			//1.首先计算鼠标悬浮后的位置
			var loca = e || window.event;
			//鼠标的横向位置
			var sx = loca.clientX;
			//鼠标的纵向位置
			var sy = loca.clientY;
			console.log(sx,sy);
			//黄色盒子的左移动位置相当于鼠标到盒子的左边界的距离
			//获得黄色盒子的宽度和高度的一半大小
			var yw = $(".yed").outerWidth() / 2;

			var yh = $(".yed").outerHeight() / 2; 
			//获得黄色盒子的实际宽高加上边框的距离
			var ysk = $(".yed").outerWidth(true);
			var ysg = $(".yed").outerHeight(true);
			console.log(ysk,ysg);
            //获得盒子的位移位置
			var shijix =  sx - yw ;
			var shijiy = sy - yh;
			// console.log(yw,yh);
			//不能使黄色盒子移除边界
			if(shijix < 0){
				shijix = 0
			}
			if(shijiy < 0){
				shijiy = 0;
			}
			if(shijix > $(".ll").width() - ysk){
				shijix = $(".ll").width() - ysk;
			}
			if(shijiy > $(".ll").height() - ysg){
				shijiy = $(".ll").height() - ysg;
			}
			$(".yed").css({
				left: shijix + "px",
				top: shijiy + "px"
			});
			//求比例 当前黄色盒子的位移位置与左侧小盒子与黄色盒子差值的一个比值
			var bilileft = shijix / ($(".ll").width() - $(".yed").width());
			var bilitop = shijiy / ($(".ll").height() - $(".yed").height());
			console.log($(".rr>img").outerWidth() - $(".rr").outerWidth());
			$(".rr>img").css({
            //由于移动的一个位置与大图片的移动位置相反，设置 - 号
				left: -($(".rr>img").width() - $(".rr").width())*bilileft + "px",
				top: -($(".rr>img").height() - $(".rr").height())*bilitop + "px"
			});
		})

		$(".ll").mouseout(function(){
			$(".yed").hide();
			$(".rr").hide();
		})
	</script>
</html>
猜你喜欢
