Explanation of image magnification function-JS Tutorial-php.cn

Explanation of image magnification function

巴扎黑

Release： 2017-07-17 14:53:06

Original

1538 people have browsed it

1.The idea of picture magnifying glass:

When the page is opened, there are only pictures

First, let’s talk about the basic effects and adjustments, the picture magnifying glass, that is, when you move the mouse into the current product picture, a small gray observation moving frame will appear, and a magnification of the corresponding part will appear. picture of.

Then when move the mouse, the magnifying glass on the right will appear an enlarged picture of the corresponding part

Finally, when moves away, the small observation frame and the enlarged picture will disappear.

2,. If you have the basic idea, look at the code

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

Copy after login

The above is the detailed content of Explanation of image magnification function. For more information, please follow other related articles on the PHP Chinese website!