js原生写一个放大镜

现在很多pc商城查看商品详情的时候，鼠标移动过商品图片的时候，图片都有放大功能，现在利用js一些属性，元素写一个小型的放大镜，代码如下：
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		body,div,img{margin: 0;padding: 0}
		#main{width: 300px;height: 187px;margin:50px auto;position: relative;}
		#small{width:100%;border:1px solid #666;}
		#big{width:100%;height:187px;border:1px solid #666;overflow: hidden;position: absolute;left: 320px;top:0;}
		#mark{width:50px;height: 50px;background-color: #ccc;position: absolute;left: 0;top:0;opacity: 0.5}
		#big,#mark{display: none}
	</style>
</head>
<body>
	<div id="main">
		<div id="small">
			<!-- 小图 -->
			<img src="img/ktm_small.jpg">
			<!-- 镜头 -->
			<div id="mark"></div>
		</div>
		<div id="big">
			<img src="img/ktm_big.jpg">
		</div>
	</div>
	<script type="text/javascript">
		//1. 找到小图
		var small = document.getElementById('small');
		//找到大图
		var big = document.getElementById('big');
		//找到镜头
		var mark = document.getElementById('mark');

		//鼠标移入到小图，镜头、大图显示
		small.onmouseover = function(){
			big.style.display = 'block';
			mark.style.display = 'block';
		}
		//鼠标离开小图，大图、镜头隐藏
		small.onmouseout = function(){
			big.style.display = 'none';
			mark.style.display = 'none';
		}

		//监视鼠标在小图上的移动行为
		small.onmousemove = function(ev){
			var x = ev.clientX - this.parentNode.offsetLeft - mark.offsetWidth/2;
			var y = ev.clientY - this.parentNode.offsetTop -mark.offsetHeight/2;

			if(x<=0){
				x = 0;
			}
			if(y<=0){
				y = 0;
			}
			if(x >= small.offsetWidth - mark.offsetWidth){
				x = small.offsetWidth - mark.offsetWidth;
			}
			if(y >= small.offsetHeight - mark.offsetHeight){
				y = small.offsetHeight - mark.offsetHeight;
			}

			//document.title = this.parentNode.offsetLeft;
			//让镜头的坐标等于鼠标的坐标即可
			mark.style.left = x +'px';
			mark.style.top = y +'px';


			//通过镜头移动的比例计算大图移动的距离
			//镜头移动的距离 / 总长度  ==  大图片移动的距离 / 大图可以移动的总的长度
			//mark.offsetLeft / (small.offsetWidth - mark.offsetWidth) == bigLeft / (bigImg.offsetWidth - big.offsetWidth)
			var bigImg = big.getElementsByTagName('img')[0];
			

			var bigLeft = mark.offsetLeft/(small.offsetWidth-mark.offsetWidth) * (bigImg.offsetWidth - big.offsetWidth);
			var bigTop = mark.offsetTop/(small.offsetHeight-mark.offsetHeight) * (bigImg.offsetHeight - big.offsetHeight);
			//先定位布局，才能移动
			bigImg.style.position = 'absolute';
			bigImg.style.left = -bigLeft+'px';
			bigImg.style.top = -bigTop+'px';
		}

	</script>
</body>
</html>
示意图如下：
js原生写一个放大镜

猜你喜欢
