js实现放大镜效果

最新推荐文章于 2024-05-21 19:09:41 发布

温L

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量471

点赞数 1

本文链接：https://blog.csdn.net/lwf0829/article/details/121915179

版权

效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#small {
				width: 480px;
				height: 270px;
				position: absolute;
				left: 100px;
				top: 100px;
			}

			#mark {
				width: 150px;
				height: 150px;
				background-color: white;
				opacity: 0.5;
				position: absolute;
				top: 0;
				left: 0;
			}

			#small img {
				width: 100%;
				height: 100%;
			}

			#big {
				width: 450px;
				height: 450px;
				border: 1px solid black;
				left: 600px;
				top: 100px;
				position: absolute;
				overflow: hidden;
				display: none;
				
			}

			#big img {
				width: 1440px;
				height: 810px;
				position: absolute;
				top: 0;
				left: 0;
			}
		</style>
	</head>
	<body>
		<div id="small">
			<img src="./images/333.jpg">
			<div id="mark"></div>
		</div>
		<div id="big">
			<img src="./images/333.jpg">
		</div>
	</body>
	<script type="text/javascript">
	// 获取dom节点
		var oSmall = document.getElementById('small');
		var oBig = document.getElementById('big');
		var oMark = document.getElementById('mark');
		var oBigImg=oBig.getElementsByTagName('img')[0];
		// 当鼠标进入时显示两个框
		oSmall.onmouseover = function() {
			oMark.style.display = 'block'
			oBig.style.display='block'
		}
		// 当鼠标离开时隐藏
		oSmall.onmouseout = function() {
			oMark.style.display = 'none'
			oBig.style.display='none'
		}
		
		oSmall.onmousemove = function(ev) {
			var e = ev || window.event;
			var l= e.clientX - oSmall.offsetLeft - 75;
			var t=e.clientY - oSmall.offsetTop - 75;
			if(l<=0){
				l=0;
			}
			if(l>=330){
				l=330;
			}
			if(t<=0){
				t=0;
			}
			if(t>=120){
				t=120;
			}
			oMark.style.left = l + 'px'
			oMark.style.top = t + 'px'
			
			//右边的图片的移动方式。左边遮罩层如何移动，右边图片，反方向对应倍数移动
			oBigImg.style.left = l * -3 + 'px'
			oBigImg.style.top = t * -3 + 'px'
		}
	</script>
</html>

温L

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js实现放大镜效果

效果<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #small { width: 480px; height: 270px; position: absolute; left: 100px; top: 100px;..
复制链接

扫一扫