집 > 기사 > 웹 프론트엔드 > 이미지 확대 기능 설명

이미지 확대 기능 설명

巴扎黑원래의: 2017-07-17 14:53:061499검색

1.사진 돋보기 아이디어 :

페이지를 열면 사진만 나옵니다

먼저 기본 효과와 조정에 대해 이야기하자면, 사진 돋보기 즉, 현재 제품 사진에 마우스를 가져가면 작은 회색 관찰 이동 프레임이 나타나며, 해당 부분의 확대 사진이 나타납니다.

　 그러면 마우스를 하면 오른쪽의 돋보기가 해당 부위의 확대사진이 나타납니다

　마지막으로 마우스를 움직이면, 작은 관찰틀과 확대된 사진 사라질 것입니다.

2,. 기본적인 아이디어를 얻었다면 코드를 보세요

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#small{
				width: 300px;
				height: 300px;
				border: 1px solid firebrick;
				float: left;
				position: relative;
			}
			#small img{
				width: 100%;
				height: 100%;
				
			}
			#mask{
				width: 100px;
				height: 100px;
				background: rgba(0,0,0,0.3);
				position: absolute;
				top: 0;
				left: 0;
				display: none;
			}
			#big{
				width: 300px;
				height: 300px;
				border: 1px solid hotpink;
				overflow: hidden;
				float: left;
				margin-left: 50px;
				position: relative;
				display: none;
			}
			#big img{
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
//				获取到所有的元素,因为有对应元素的移动,所以在设置样式的,一定要给对应的元素绝对定位,类似于拖拽
				var oSmall = document.getElementById(&#39;small&#39;),
				oMask = document.getElementById(&#39;mask&#39;),
				oBig = document.getElementById(&#39;big&#39;),
				oBigImg = document.getElementById(&#39;bigImg&#39;);
				//给当前小的div一个鼠标移入事件
				oSmall.onmouseover = function(){
//					当鼠标移入时,对应的区域显示  小的观察框，和 对应的右面的放大图片
					oMask.style.display = &#39;block&#39;;
					oBig.style.display = &#39;block&#39;;
				};
				oSmall.onmouseout = function(){
//					当鼠标移除时对应的区域隐藏
					oMask.style.display = &#39;none&#39;;
					oBig.style.display = &#39;none&#39;
				}
				oSmall.onmousemove = function(ev){
//					首先获取到event事件
					var oEvent = ev || event;
//					offsetWidth = 本身的样式宽 + 左右padding + 左右border
//					clientX clientY 获取鼠标指针位置,相对于当前窗口的 X 和 Y 坐标
					
//					鼠标距离当前窗口左边的距离 了l ,就为当前鼠标距离窗口左边的距离 减去  小的观察框的宽度
//							oMask.offsetWidth / 2 设置鼠标处于正中心的位置
					var l = oEvent.clientX - oMask.offsetWidth / 2;
					var t = oEvent.clientY - oMask.offsetHeight / 2;
					
//					对观察框距离的限制, 1.当它距离左边的距离比0 小的时候,设置它为0 就是它移动到最左边的时候
					if (l < 0) {
						l = 0;
					}else if(l > oSmall.offsetWidth - oMask.offsetWidth){
//						当它移动到最右边的时候,设置它的left值为  当前的left值
						l = oSmall.offsetWidth - oMask.offsetWidth;
					};
					
					//同理对上下边界进行设置
					if (t < 0) {
						t = 0;
					}else if(t > oSmall.offsetHeight - oMask.offsetHeight){
						t = oSmall.offsetHeight - oMask.offsetHeight;
					};

//					设置小的观察框的移动时的当前位置
					oMask.style.left = l + &#39;px&#39;;
					oMask.style.top = t + &#39;px&#39;;
					
//					设置对应的右边放大图片对应的位置
					//var scale = l / (oSmall.offsetWidth - oMask.offsetWidth);
//					大的可视区域的宽减去小的观察框对应的宽,就是可移动的总距离,   当前处的位置,处于总的距离的比例 与大图片,在大图片的可视框里所处的位置相同所以如下
					oBigImg.style.left = l * (oBig.offsetWidth - oBigImg.offsetWidth)/(oSmall.offsetWidth-oMask.offsetWidth)+"px";
					oBigImg.style.top = t * (oBig.offsetHeight - oBigImg.offsetHeight)/(oSmall.offsetHeight-oMask.offsetHeight)+"px";
					
				}
			}
		</script>
	</head>
	<body>
		<div id="small">
			<img src="img/s.jpg" />
			<spanS id="mask"></span>
		</div>
		<div id="big">
			<img src="img/b.jpg" id="bigImg"/>
		</div>
	</body>
</html>

위 내용은 이미지 확대 기능 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JavaScript 학습 경로다음 기사：JavaScript 학습 경로