js 放大镜

最新推荐文章于 2024-04-06 11:53:25 发布

Joke丿而已

最新推荐文章于 2024-04-06 11:53:25 发布

阅读量223

点赞数

分类专栏： JavaScript 学习阶段文章标签： js 放大镜 html5

本文链接：https://blog.csdn.net/xiaoquan1224/article/details/52614176

版权

JavaScript 学习阶段专栏收录该内容

7 篇文章 0 订阅

订阅专栏

js 实现放大镜效果

当鼠标在设定的窗口内移动时放大镜区域内的图片就会放大

</pre><pre name="code" class="html">

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.wrap {width: 1000px; height: 800px; border: 1px solid black; position: relative;}
			.wrap img {width: 100%; height: 100%;}
			.ball {width: 200px; height: 200px; border-radius: 55%; position: absolute; top: 0px; left: 0px; overflow: hidden; display: none;}
			.ball img {width: 2000px; height: 1600px;}
		</style>
	</head>
	<body>
		<div class="wrap">
			<img src="e7adcfd66005bc9c454c75c083c5c15f.jpg"/>
			<div class="ball">	
				<img src="e7adcfd66005bc9c454c75c083c5c15f.jpg"/>
			</div>
		</div>
	</body>
	<script type="text/javascript">
	
		//获取元素
		var wrap = document.querySelector('.wrap');
		var ball = document.querySelector('.ball');
		var ballImge = document.querySelector('.ball img');
		

		//鼠标移入 放大镜	
		wrap.onmousemove = function(){
			ball.style.display = 'inline-block';
			var ev = window.event || event;
			//获取鼠标当前位置 并使鼠标在放大镜中间
			var disX = ev.clientX - ball.offsetHeight / 2;
			var disY = ev.clientY - ball.offsetWidth / 2 ;
			
			var maxX = wrap.offsetWidth - ball.offsetWidth; //放大镜X轴可移动的距离
			var maxY = wrap.offsetHeight - ball.offsetHeight;//放大镜Y轴可以动的距离
			
			//判断放大镜的位置 不能移出 wrap的可视区域
			if(disX <= 0){
				disX = 0;
			}
			if(disX >= maxX){
				disX = maxX;
			}
			if(disY <= 0){
				disY = 0;
			}
			if(disY >= maxY){
				disY = maxY;
			}
			
			//鼠标移动时改变放大镜的位置
			ball.style.top = disY + 'px';
			ball.style.left = disX + 'px';
			
			//放大镜位置 与 它在wrap内可移动范围的比例
			var scaleX = ball.offsetLeft/(wrap.offsetWidth - ball.offsetWidth);
			var scaleY = ball.offsetTop/(wrap.offsetHeight - ball.offsetHeight);
			
			//通过比例改变 ball 内被隐藏掉的滚动条位置 实现放大功能
			ball.scrollLeft = (ballImge.offsetWidth - ball.offsetWidth) * scaleX; 
			ball.scrollTop = (ballImge.offsetHeight - ball.offsetHeight) * scaleY; 
			
		}
		//鼠标移出 隐藏放大镜
		ball.onmouseout = function(){
			var ev = window.event || event;
			ball.style.display = 'none';
		}
	</script>
</html>