Rumah >hujung hadapan web >tutorial js >图片的放大功能讲解

图片的放大功能讲解

巴扎黑asal: 2017-07-17 14:53:061525semak imbas

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>

Atas ialah kandungan terperinci 图片的放大功能讲解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JavaScript学习之路Artikel seterusnya：JavaScript基础知识讲解

Artikel berkaitan

Lihat lagi