圖片的放大功能解說

巴扎黑原創: 2017-07-17 14:53:061520瀏覽

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中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript學習之路下一篇：JavaScript學習之路

看更多