原生js实现图片详情页面放大镜

最近的网站项目需要实现这个放大镜，在网上也下载了一些实现了的代码，不过感觉比较笨重，就自己写了一次，实现了，需要的朋友可以拿去用;

以下是html部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/fdj.css" />
		<script src="js/fdj.js"></script>
	</head>
	<body>
		<div id='bigDiv' class='clearfix'>
			<div class='left_div'>
				<div id='mid_div'>
					<img src="images/detail_img/image1.jpg" alt="" />
					<div id='gai'></div>
				</div>
				<div id='min_div' class='clearfix'>
					<img src="images/detail_img/image1.jpg" alt="" data-num='1'/>
					<img src="images/detail_img/image2.jpg" alt="" data-num='2'/>
					<img src="images/detail_img/image3.jpg" alt="" data-num='3'/>
					<img src="images/detail_img/image4.jpg" alt="" data-num='4'/>
					<img src="images/detail_img/image5.jpg" alt="" data-num='5'/>
				</div>
				
			</div>
			
			<div id='max_div'>
				<img src="images/detail_img/image1.jpg" alt="" />
			</div>
		</div>
	</body>
</html>

以下是css部分：

*{
	margin:0;
	padding:0;
	
}
/*去掉浮动*/	
.clearfix:after{
		height:0;
		content:" ";
		display:block;
		overflow:hidden;
		clear:both;
	}
.clearfix{
	zoom:1;/*IE低版本浏览器不支持after伪类所以要加这一句*/
}


#bigDiv img{
	display:block;
}
#bigDiv{
	overflow:hidden;
	background:pink;
}
/*左盒子*/
.left_div{
	float:left;
}
/*中盒子*/
#mid_div{
	width:350px;
	height:350px;
	border:8px solid #ccc;
	position:relative;/*相对定位*/
}
#mid_div img{
	width:100%;
}
#gai{
	width:100px;
	height:100px;
	background:rgba(67,98,230,0.4);
	position:absolute;/*子绝父相*/
	display:none;
}
/*大盒子*/
#max_div{
	float:left;
	position:relative;/*相对定位*/
	border:4px solid #ccc;
	overflow:hidden;
	display: none;
}
#max_div img{
	/*子绝父相*/
	position:absolute;
}
/*小盒子*/
#min_div{
	/*float:left;*/
	width:350px;
}
#min_div img{
	float:left;
	width:20%;
}

以下是js部分：

window.onload = function(){
	// 预加载
	new Image().src='images/detail_img/image1.jpg';
	new Image().src='images/detail_img/image2.jpg';
	new Image().src='images/detail_img/image3.jpg';
	new Image().src='images/detail_img/image4.jpg';
	new Image().src='images/detail_img/image5.jpg';
	
	var bigDiv = document.getElementById('bigDiv'),
		mid_div = document.getElementById('mid_div'),
		mid_img = mid_div.children[0],
		gai = mid_div.children[1],
		min_div = document.getElementById('min_div'),
		min_imgs = min_div.children,
		max_div = document.getElementById('max_div'),
		max_img = max_div.children[0];
	
	// 鼠标放上小的img上 中盒子和大盒子都需要更换图片的src
	console.log(min_imgs.length,min_imgs)
	for(var i=0,len=min_imgs.length;i<len;i++){
		(function(j){
			min_imgs[j].onmouseenter = function(){
				var img_src = this.src;
				mid_img.src = img_src;
				max_img.src = img_src;
			}
		})(i)
	}
	
	// 鼠标放上显示gai 移开隐藏
	mid_div.onmouseenter = function(){
		gai.style.display = 'block';
		max_div.style.display = 'block';
	};
	mid_div.onmouseleave = function(){
		gai.style.display = 'none';
		max_div.style.display = 'none';
	};
	
	//兼容的滑动位置 madeby:张飞龙
	// 滚动条的像素兼容写法
	window.scroll = function(){
		return {
			"top":document.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
			"left":document.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
		}
	}
	// 在中盒子上滑动的时候 需要获取鼠标在mid_div中的坐标位置
	mid_div.onmousemove = function(event){
		event = event || window.event;
		//获取鼠标在文档中的坐标位置 = 滚动条的px+距离浏览器边的px
		var pageX = event.pageXOffset || window.scroll().left + event.clientX;
		var pageY = event.pageYOffset || window.scroll().top + event.clientY;
 		//console.log(pageX,pageY)
 		//mid_div盒子相对于有定位的父盒子的位置；没有定位的盒子则为body
 		var mid_divX = mid_div.offsetLeft,
 			mid_divY = this.offsetTop;
		//console.log(mid_divX,mid_divY)
		//让gai盒子的位置和鼠标一起动起来，最好鼠标的在gai中心位置,
		//X为gai盒子的位置，等于鼠标相对body的位置-mid_div的盒子相对body的位置-gai盒子自身宽度的一半
		var X = pageX - mid_divX - gai.offsetWidth/2;
		var Y = pageY - mid_divY - gai.offsetHeight/2;
		//console.log(X,Y)
		// 设置边界
		if(X<=0){X=0};
		if(Y<=0){Y=0};
		var max_left = mid_div.scrollWidth-gai.offsetWidth;
		var max_top = mid_div.scrollHeight - gai.offsetWidth;
		if(X>=max_left){
			X = max_left;
		}
		if(Y>=max_top){
			Y = max_top;
		}
		// 设置位置
		gai.style.left = X + 'px';
		gai.style.top = Y + 'px';
		// 大盒子的大小应该计算出来，和gai盒子等比例就很好了，这样设计比较好
		var biliX = gai.offsetWidth/mid_div.scrollWidth;
		var biliY = gai.offsetHeight/mid_div.scrollHeight;
		max_div.style.width = biliX * max_img.offsetWidth + 'px';
		max_div.style.height = biliY * max_img.offsetHeight + 'px';
		
 		var bili = mid_div.scrollWidth/max_img.offsetWidth;
 		//console.log(bili)
 		
		max_img.style.left = -X/bili + 'px';
		max_img.style.top = -Y/bili + 'px';
	};
}

感觉现在的csdn粘代码越来越丑了。

原生js实现图片详情页面放大镜

猜你喜欢