jQuery图片放大镜效果

jQuery图片放大镜效果

演示效果：

jQuery图片放大镜效果

HTML代码：

<!-- 放大镜效果 -->
<div class="magnifierwrap">
	
	<div class="magnifier">
		<!-- 小图box -->
		<div class="m-smallimg">
			<img src="img/img01.jpg" />
			<!-- 图片遮挡层 -->
			<div class="m-imgmask"></div>
		</div>
		
		<!-- 切换列表 -->
		<ul class="m-imglist">
			<li class="now"><img src="img/img01.jpg"/></li>
			<li><img src="img/img02.jpg"/></li>
			<li><img src="img/img03.jpg"/></li>
			<li><img src="img/img04.jpg"/></li>
		</ul>
	</div>
	
	<!-- 大图展示 -->
	<div class="m-bigimg">
		<img src="img/img01.jpg" />
	</div>
	
</div>

CSS样式：

/* 图片放大镜 */
.magnifierwrap{width: 1020px;margin: 100px auto;position: relative;}
.magnifier{width: 500px;position: relative;}
/* smallimg */
.m-smallimg{width: 100%;height: 280px;position: relative;overflow: hidden;}
.m-smallimg img{display: block;width: 100%;height: 100%;object-fit: cover;}
/* m-imgmask */
.m-imgmask{width: 100px;height: 100px;background-color: rgba(255,255,255,0.6);position: absolute;top: 0;left: 0;cursor: move;display: none;}
/* .m-smallimg:hover .m-imgmask{display: block;} */

/* m-imglist */
.m-imglist{width: 100%;box-sizing: border-box;display: flex;display: -webkit-flex;-webkit-justify-content: space-between;justify-content: space-between;margin-top: 20px;}
.m-imglist li{width: calc((100% - 60px)/4);position: relative;overflow: hidden;opacity: 0.5;}
.m-imglist li.now{opacity: 1;}
.m-imglist li img{display: block;width: 100%;}
.m-bigimg{width: 500px;height: 280px;position: absolute;right: 0;top: 0;overflow: hidden;display: none;}

jQuery代码：

$(function(){
	var $smallbox=$(".m-smallimg");
	var $smallimg=$(".m-smallimg img")
	var $bigbox=$(".m-bigimg");
	var $mask=$(".m-imgmask");
	var $bigimg=$(".m-bigimg img");
	
	
	// 列表图切换
	$(".m-imglist li").mouseenter(function(){
		// 获取src
		var imgsrc=$(this).find("img").attr("src");
		// 当前显示效果
		$(this).addClass("now").siblings().removeClass("now");
		// 添加src
		$(".m-smallimg img").attr("src",imgsrc);
		$(".m-bigimg img").attr("src",imgsrc);
		return false;
	});
	
	//鼠标进入显示大图和遮挡层
		$smallbox.mouseenter(function(){
			$bigbox.css("display","block");
			$mask.css("display","block");
		})
		
	//鼠标离开隐藏大图和遮挡层
		$smallbox.mouseleave(function(){
			$bigbox.css("display","none");
			$mask.css("display","none");
		})
	
	
	//遮挡层随着鼠标移动
	$smallbox.mousemove(function(e){
		//可移动的区域
		var x=e.clientX-$mask.width()/2;
		var y=e.clientY-$mask.height()/2;
		var x = e.pageX;  //鼠标的x坐标(鼠标到窗口的距离)
		var y = e.pageY;  //鼠标的y坐标
		markL = $(".m-smallimg").offset().left;  //图片到窗口的距离
		markT = $(".m-smallimg").offset().top;
		//坐标点左上角坐标,然后减去透明盒子的一半
		var dx = x - markL - $mask.width()/2;  
		var dy = y - markT - $mask.width()/2;
		//  横坐标,纵坐标的最小值
		dx=dx<0?0:dx;
		dy=dy<0?0:dy; 
		// 鼠标移到最大值
		dx=dx>$smallbox.width()-$mask.width()?$smallbox.width()-$mask.width():dx;
		dy=dy>$smallbox.height()-$mask.height()?$smallbox.height()-$mask.height():dy;
		
		$mask.css({"left":dx+"px","top":dy+"px"})
		
		//   遮挡层移动的距离/大图移动的距离=遮挡层的最大值/大图的最大值
		//	 大图的最大值  
		var bigx=$bigimg.width()-$bigbox.width();
		var bigy=$bigimg.height()-$bigbox.height();
		
		//  大图移动的距离
		var  movex=(dx*bigx)/($smallimg.width()-$mask.width());
		var  movey=(dy*bigy)/($smallimg.height()-$mask.height());
		$bigimg.css({"margin-left":-movex,"margin-top":-movey});
		
	})
	
})