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
		});
	});
	
});