放大镜

最新推荐文章于 2025-08-23 14:05:26 发布

原创最新推荐文章于 2025-08-23 14:05:26 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

Js 专栏收录该内容

4 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		body,div,img{margin: 0;padding: 0}
		#main{margin:50px;position: relative;}
		#small{width: 300px;height: 187px;border: 1px solid #000;position: relative;}
		#mark{
			width: 50px;
			height: 50px;
			background: #ccc;
			opacity: 0.5;
			position: absolute;
			left: 0;
			top: 0;
			display: none;
		}
		#big{
			width:300px;
			height: 187px;
			border: 1px solid #000;
			overflow: hidden;
			position: absolute;
			left:320px;
			top:0px;
			display: none;
		}
		#big img{position: absolute;}
	</style>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript">
		window.onload = function(){
			//页面加载完毕找到small、big、mark
			var small = $('small');
			var big = $('big');
			var mark = $('mark');
			var bigImg = big.getElementsByTagName('img')[0];
			//鼠标移入
			small.onmouseover = function(){
				mark.style.display = 'block';
				big.style.display = 'block';
			}
			//鼠标移出
			small.onmouseout = function(){
				mark.style.display = 'none';
				big.style.display = 'none';
			}
			//鼠标在小图移动的时候
			small.onmousemove = function(e){
				var ev = e || window.event;
				//鼠标在small小图里面的距离
				var x = ev.clientX - small.parentNode.offsetLeft;
				var y = ev.clientY - small.parentNode.offsetTop;

				//确定镜头的坐标
				var markLeft = x - (mark.offsetWidth/2);
				var markTop = y - (mark.offsetHeight/2);

				//不让镜头出界
				//如果距离左边小于0，就重新赋值为0,
				if(markLeft<0){
					markLeft = 0;
				}
				//如果距离顶部小于0，就重新赋值为0
				if(markTop<0){
					markTop = 0;
				}
				//如果镜头向右边移动的距离加上本身宽度大于了small小图的宽度，说明出右边的界了
				if(markLeft+mark.offsetWidth>small.offsetWidth){
					markLeft = small.offsetWidth - mark.offsetWidth;
				}
				//如果镜头向下面移动的距离加上本身的高度大于了small小图的高度，说明出底部的界了
				if(markTop+mark.offsetHeight>small.offsetHeight){
					markTop = small.offsetHeight - mark.offsetHeight;
				}
				//设置镜头的位置
				mark.style.left = markLeft+'px';
				mark.style.top = markTop+'px';

				//计算大图移动的比例(参考excel表中的图)
				//markLeft / (small.offsetWidth - mark.offsetWidth) == bigLeft / (bigImg.offsetWidth-big.offsetWidth)
				var bigLeft = markLeft / (small.offsetWidth - mark.offsetWidth) * (bigImg.offsetWidth-big.offsetWidth);
				var bigTop = markTop / (small.offsetHeight - mark.offsetHeight) * (bigImg.offsetHeight-big.offsetHeight);
				bigImg.style.left = -bigLeft+'px';
				bigImg.style.top = -bigTop+'px';
			}
		}
	</script>
</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>
</body>
</html>