JQ实现放大镜效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>放大镜</title>
	<style>
		*{margin:0;padding: 0;}
		#box{position: relative;
			}
		#smallpic{width:200px;
				height: 200px;
				border:1px solid red;
				margin-left:100px;
				margin-top:30px;
				position: relative;}

		#glass{width: 100px;
			height: 100px;
			background: red;
			opacity: 0.3;
			position: absolute;
			top:0;
			left: 0;
			display: none;}
		#bigpic{width:300px;
				height: 300px;
				
				position: absolute;	
				left: 320px;
				top:0;
				overflow: hidden;
				display: none;}
		#bigpic img{position: absolute;
					left: 0;
					top:0;}
	</style>

	<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
	<script type="text/javascript">
	//3个方面,在小图片上移动,大图片上有对应的移动.
	//计算放大镜在小图片上的位置.
		//鼠标放在小图片上,呈现放大镜和大图片
		//
		$(function(){
			//鼠标放在小图片上,呈现放大镜和大图片
			//
			$("#smallpic").on("mouseover",function(){
				$("#glass").css("display","block");
				$("#bigpic").css("display","block")
			})

			//鼠标移出时,消失
			
			$("#smallpic").on("mouseout",function(){
				$("#glass").css("display","none");
				$("#bigpic").css("display","none")
			})

			//鼠标在图片上移动时
			//
			$("#smallpic").on("mousemove",function(ev){
				//获取鼠标在小图片上的位置
				
				var disX=ev.clientX-$("#smallpic").offset().left-$("#glass").width()/2;
			

				var disY=ev.clientY-$("#smallpic").offset().top-$("#glass").height()/2;

				//判断,让放大镜不能出界
				
				if(disX<0){
					disX=0
				}else if(disX>($("#smallpic").width()-$("#glass").width())){
					disX=$("#smallpic").width()-$("#glass").width()
				}

				if(disY<0){
					disY=0
				}else if(disY>($("#smallpic").height()-$("#glass").height())){
					disY=$("#smallpic").height()-$("#glass").height()
				}


				//鼠标移动起来
				$("#glass").css({
					left:disX+"px",
					top:disY+"px"
				})

				//大图片的移动其实和放大镜移动时按照一定比例来进行
				//比例
				var l=disX/($("#smallpic").width()-$("#glass").width())

				var t=disY/($("#smallpic").height()-$("#glass").height())
				
				//大图片移动,放大镜向左移动,大图片整体向右移动,所以是反的
				//
				$("#oImg").css({
					left:-l*($("#oImg").width()-$("#bigpic").width())+"px",
					top:-t*($("#oImg").height()-$("#bigpic").height())+"px"
				})
			})
		})
	</script>
</head>
<body>

	<div id="smallpic">
		<div id="glass"></div>
		<div><img src="smallpic.jpg"></div>
	</div>


	<div id="bigpic">
		<img src="bigpic.jpg" id="oImg">
	</div>

</body>
</html>

1>实现这个效果需要分析分析:

小图片是不需要动的,动的是鼠标滑动和大图片.因此我们需要实现鼠标在小图片上的运动以及要对大图片进行绝对定位

2>实现原理

当鼠标在小图片上运动时,大图片出现对应的部分.这怎么做到的呢?其实这是利用鼠标在小图片上的位置,然后用一定的比例来实现大图片对应位置,这要用到一定的比例.

3>实现这个效果,就是4个方面,当鼠标移入时,出现放大镜和大图片;当鼠标移出时,放大镜和大图片消失;放大镜能在小图片上滑动,并且不能超出;当放大镜在小图片上滑动,大图片出现对应位置.(也就是联动的效果)

4>实现难点:大图片出现的位置与放大镜出现的位置一致.这不仅需要一定的比例系数来支持,同时小图片和放大镜宽高的比例与大图片和其所在的盒子的宽高比一样

不过也可以用一些放大镜的插件来完成，更加方便。比如：MagicZoom.js

JQ实现放大镜效果

猜你喜欢