Heim > Artikel > Web-Frontend > Erläuterung der Bildvergrößerungsfunktion

Erläuterung der Bildvergrößerungsfunktion

巴扎黑Original: 2017-07-17 14:53:061499Durchsuche

1.Die Idee der Bilderlupe:

Beim Öffnen der Seite sind nur Bilder zu sehen

Lassen Sie uns zunächst über die grundlegenden Effekte und Anpassungen sprechen, die Bildlupe, d. h. wenn Sie die Maus in das aktuelle Produktbild bewegen, eine kleine graue Beobachtung Es erscheint ein beweglicher Rahmen und eine Vergrößerung des entsprechenden Teils des Bildes.

Wenn Sie dann die Maus bewegen, erscheint auf der rechten Seite der Lupe ein vergrößertes Bild des entsprechenden Teils

Wenn sich schließlich entfernt, verschwinden der kleine Beobachtungsrahmen und das vergrößerte Bild.

2,. Wenn Sie die Grundidee haben, schauen Sie sich den Code an

<!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>

Das obige ist der detaillierte Inhalt vonErläuterung der Bildvergrößerungsfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JavaScript-LernpfadNächster Artikel：JavaScript-Lernpfad

In Verbindung stehende Artikel

Mehr sehen