圖片放大鏡

時間 2019-11-11

標籤圖片放大鏡简体版

原文原文鏈接

1.圖片放大鏡的思路：javascript

　　當打開頁面時只有圖片css

　　首先，說一下基本效果和調理，圖片放大鏡，也就是當你鼠標移入當前的商品圖片時，會出現一個小灰色的觀察移動框，有點會出現一個對應部位的放大的圖片。html

　　而後當鼠標移動時，右邊的放大鏡會出現對應部位的放大圖片java

　　最後當鼠標移開後，小的觀察框和放大的圖片都會消失。spa

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('small'),
				oMask = document.getElementById('mask'),
				oBig = document.getElementById('big'),
				oBigImg = document.getElementById('bigImg');
				//給當前小的div一個鼠標移入事件
				oSmall.onmouseover = function(){
//					當鼠標移入時,對應的區域顯示  小的觀察框，和 對應的右面的放大圖片
					oMask.style.display = 'block';
					oBig.style.display = 'block';
				};
				oSmall.onmouseout = function(){
//					當鼠標移除時對應的區域隱藏
					oMask.style.display = 'none';
					oBig.style.display = 'none'
				}
				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 + 'px';
					oMask.style.top = t + 'px';
					
//					設置對應的右邊放大圖片對應的位置
					//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>

　　還有什麼更好的方法互相交流htm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。