原生js放大镜demo

最新推荐文章于 2022-06-15 21:44:18 发布

原创最新推荐文章于 2022-06-15 21:44:18 发布 · 654 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

原生js之放大镜demo 专栏收录该内容

1 篇文章

订阅专栏

HTML代码

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>放大镜Demo</title>
	<link rel="stylesheet" type="text/css" href="details.css"/>
	<script src="jquery-1.11.0.js"type="text/javascript"charset="utf-8"></script>
	<script src="details.js"type="text/javascript"charset="utf-8"></script>

	</head>

	<body>
	<!-----------------------------------------main1--------------------------------------------->
	<div class="dm1left flt">
	<!------------大---------->
	<div class="m1big">
	<ul class="m1biglist">
	<li class="z5"><imgsrc="imgs/fbbxxx1.jpg"/></li>
	<li><imgsrc="imgs/fbbxxx2.jpg"></li>
	<li><imgsrc="imgs/fbbxxx3.jpg"/></li>
	<li><imgsrc="imgs/fbbxxx4.jpg"/></li>
	<li><imgsrc="imgs/fbbxxx5.jpg"/></li>
	<li><imgsrc="imgs/fbbxxx6.jpg"/></li>
	<li><imgsrc="imgs/fbbxxx7.jpg"/></li>
	</ul>
	</div>
	<!------------中---------->
	<div class="m1center">
	<div class="m1cenmask z10"></div>
	<ul class="m1cenlist">
	<li class="z5"><imgsrc="imgs/fbbxx1.jpg"/></li>
	<li><imgsrc="imgs/fbbxx2.jpg"/></li>
	<li><imgsrc="imgs/fbbxx3.jpg"/></li>
	<li><imgsrc="imgs/fbbxx4.jpg"/></li>
	<li><imgsrc="imgs/fbbxx5.jpg"/></li>
	<li><imgsrc="imgs/fbbxx6.jpg"/></li>
	<li><imgsrc="imgs/fbbxx7.jpg"/></li>
	</ul>
	</div>
	<!------------小---------->
	<div class="m1small">
	<ul class="m1smlist">
	<li class="m1smactive"><imgsrc="imgs/fbbx1.jpg"/><em></em></li>
	<li><imgsrc="imgs/fbbx2.jpg"/><em></em></li>
	<li><imgsrc="imgs/fbbx3.jpg"/><em></em></li>
	<li><imgsrc="imgs/fbbx4.jpg"/><em></em></li>
	<li><imgsrc="imgs/fbbx5.jpg"/><em></em></li>
	<li><imgsrc="imgs/fbbx6.jpg"/><em></em></li>
	<li><imgsrc="imgs/fbbx7.jpg"/><em></em></li>
	</ul>
	</div>
	</div>
	</body>
	</html>

css代码

/*------------------------------放大镜-----------------------------------*/
ul,li{
	list-style: none;
}

.dm1left{
	overflow: hidden;
	clear:both;
	position:relative;
}
.m1big {
	display: none;
	position: absolute;
	left: 495px;
	top: 0px; 
	width: 480px;
	height: 480px;
}
.m1biglist,
.m1biglist  li {
	position: absolute;
	left: 0;
	top: 0;
	width: 800px;
	height: 800px;
	overflow: hidden;
}

.m1center{
	width: 480px;
	height: 480px;
	border: 1px solid #ccc;
	position:relative;
	cursor: pointer;
}
.m1cenlist li {
	position: absolute;
	left:0;
	top: 0;
	right:0;
	bottom:0;	
	width: 480px;
	height: 480px;
}
.m1cenmask{
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 200px;
	height: 200px;
	background: rgba(255,255,0,.5);
	cursor: all-scroll;
	z-index: 100;
}

.m1small{
	margin-top:15px;
	height: 62px;
}
.m1smlist li{
	position: relative;
	float: left;
	margin: 0 3px;
	border: 1px solid #fff;
}
.m1smlist li em{
	display: none;
	width: 0;
	height: 0;
	position: absolute;
	left: 50%;
	top: -5px;
	margin-left: -3px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid red;
}
.m1smlist .m1smactive{
	border: 1px solid red;
}
.m1smlist .m1smactive em{
	display: block;
}

js部分

$(function() {
	

	/*------------------------放大镜效果----------------------------*/
	/*----------显示对应的中型图--------*/
	$('.m1smlist li').hover(function() {
		var index = $(this).index();
		$(this).addClass('m1smactive').siblings().removeClass('m1smactive');
		$('.m1cenlist li').eq(index).css('z-index', 6).siblings().css('z-index', 0);
		$('.m1biglist li').eq(index).css('z-index', 6).siblings().css('z-index', 0);
	})
	/*-------------显示大型图-------------*/
	$('.m1cenlist li').on('mouseenter', function() {
		$('.m1cenmask').show();
		$('.m1big').show();
	});
	$('.m1cenmask').on('mouseenter', function() {
		$('.m1cenmask').show();
		$('.m1big').show();
	});
	/*-------------隐藏大型图-------------*/
	$('.m1cenlist li').on('mouseleave', function() {
		$('.m1big').hide();
		$('.m1cenmask').hide();
	});
	$('.m1cenmask').on('mouseleave', function() {
		$(this).css('', '')
		$('.m1big').hide();
		$('.m1cenmask').hide();
	});
	/*------------------拖拽-----------------------*/
	$('.m1center').on('mousemove', function(ev) {
		var maskW  = $('.m1cenmask').width() / 2;
		var maskH  = $('.m1cenmask').height() / 2;
		var m1cenL = $('.m1center').offset().left;
		var m1cenT = $('.m1center').offset().top;
		var m1cenW = $('.m1center').width();
		var m1cenH = $('.m1center').height();
		var m1bigW = $('.m1biglist').width();
		var m1bigH = $('.m1biglist').height();
		var WinX   = Math.floor(ev.pageX);
		var WinY   = Math.floor(ev.pageY);
		var maskL  = WinX - m1cenL - maskW;
		var maskT  = WinY - m1cenT - maskH;
		//遮罩层上边界
		if(WinY <= (m1cenT + maskH)) {
			maskT = 0;
		}
		//遮罩层下边界
		if(WinY >= (m1cenT + m1cenH - maskH)) {
			maskT = m1cenH - maskH * 2;
		}
		//遮罩层左边界
		if(WinX <= (m1cenL + maskW)) {
			maskL = 0;
		}
		//遮罩层右边界
		if(WinX >= (m1cenL + m1cenW - maskW)) {
			maskL = m1cenW - maskW * 2;
		}
		
		console.log(maskL,maskT);
		//大型图右边界
		
		$('.m1cenmask').css({
			'left': Math.floor(maskL),
			'top': Math.floor(maskT)
		});
		$('.m1biglist').css({
			'left': -maskL*1.14,
			'top': -maskT*1.14
		});
	});
	
});