图片放大镜效果

最新推荐文章于 2022-06-28 17:30:08 发布

菜鸟级码农小林

最新推荐文章于 2022-06-28 17:30:08 发布

阅读量95

点赞数 1

本文链接：https://blog.csdn.net/m0_59735348/article/details/124611501

版权

JavaScript 同时被 3 个专栏收录

26 篇文章 1 订阅

订阅专栏

html

20 篇文章 0 订阅

订阅专栏

css

8 篇文章 0 订阅

订阅专栏

<style>
	.content{
		position: relative;
		border: 1px solid #ccc;
		height: 400px;
		width: 400px;
		text-align: center;
	}
	.eyeImg{
		width: 300px;
		height: 300px;
		margin: 50px;
	}
	.mask{
		position: absolute;
		top: 0;
		left: 0;
		width: 200px;
		height: 200px;
		background-color: #FEDE4F;
		opacity: .5;
		cursor: move;
		display: none;
	}
	.big{
		position: absolute;
		top: 0;
		left: 410px;
		width: 500px;
		height: 500px;
		background-color: pink;
		display: none;
		overflow: hidden;
	}
	.big img{
		width: 800px;
		height: 800px;
		position: absolute;
		top: 0;
		left: 0;
	}

</style>
<html>
    <div class="content">
		<img src="open.jpg" alt="" class="eyeImg">
		<div class="mask"></div>
		<div class="big">
			<img src="open.jpg" alt="" class="bigImg">
		</div>
	</div>
</html>
<script>
		var content = document.querySelector('.content')
		var mask = document.querySelector('.mask')
		var big = document.querySelector('.big')
		// 鼠标移入，显示黄色遮挡层和大图片
		content.addEventListener('mouseover',function(){
			mask.style.display = 'block'
			big.style.display = 'block'
		})
		// 鼠标移出，隐藏黄色遮挡层和大图片
		content.addEventListener('mouseout',function(){
			mask.style.display = 'none'
			big.style.display = 'none'
		})
		// 鼠标在盒子里面移动，黄色遮挡层也跟着移动
		content.addEventListener('mousemove',function(e){
			// e.pageX是鼠标在该页面移动的横坐标
			// e.pageY是鼠标在该页面移动的纵坐标
			// x表示鼠标在盒子内的横坐标
			// y表示鼠标在盒子内的纵坐标
			var x = e.pageX - this.offsetLeft
			var y = e.pageY - this.offsetTop
			// mask.offsetHeight / 2表示鼠标在黄色遮挡层的中央
			// maskX，maskY表示黄色遮挡层与外围盒子的距离
			var maskX = x - mask.offsetHeight / 2
			var maskY = y - mask.offsetWidth / 2
			//黄色遮挡层移动的最大距离
			var maskMax = content.offsetWidth-mask.offsetWidth
			if(maskX <= 0){
				maskX = 0
			}else if(maskX >= maskMax){
				maskX = maskMax
			}
			if(maskY <= 0){
				maskY = 0
			}else if(maskY >= maskMax){
				maskY = maskMax
			}
			// 黄色遮挡层的移动距离
			mask.style.top = maskY + 'px'
			mask.style.left = maskX + 'px'
			// 大图片的移动距离 = 黄色遮挡层的移动距离 * 大图片最大移动距离 / 黄色遮挡层的最大移动距离
			// 先获取大图片元素
			var bigImg = document.querySelector('.bigImg')
			// 大图片最大移动距离
			var bigMax = bigImg.offsetWidth - big.offsetWidth
			// 大图片的移动距离
			var bigX = maskX * bigMax / maskMax
			var bigY = maskY * bigMax / maskMax
			// 大图片展示的时候是跟鼠标移动方向相反的，所以要加个-
			bigImg.style.left = -bigX + 'px'
			bigImg.style.top = -bigY + 'px'

		})
	</script>

菜鸟级码农小林

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片放大镜效果

<style> .content{ position: relative; border: 1px solid #ccc; height: 400px; width: 400px; text-align: center; } .eyeImg{ width: 300px; height: 300px; margin: 50px; } .mask{ position: absolute; top: 0; left: 0; width: 20.
复制链接

扫一扫

专栏目录