图片放大镜

最新推荐文章于 2023-05-21 16:35:04 发布

CL有木

最新推荐文章于 2023-05-21 16:35:04 发布

阅读量393

点赞数 1

文章标签：放大镜

本文链接：https://blog.csdn.net/weixin_44034696/article/details/89186471

版权

<head>
	<meta charset="UTF-8">
	<title>zoom</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#small{
			width: 300px;
			height: 300px;
			position:relative;
			/*border: 2px solid yellow;*/
		}
		#small>img{
			width: 300px;
			height: 300px;
		}
		#slider{
			width: 230px;
			height: 230px;
			background: rgba(135,135,135,0.4);
			position: absolute;
			top: 0;
			left: 0;
			display: none;
			cursor: crosshair;
		}
		#big{
			width: 300px;
			height: 300px;
			position: absolute;
			top: 0;
			left: 350px;
			/*border: 2px solid red;*/
			overflow: hidden;
			display: none;
		}
	</style>
</head>
<body>
	<!--原图-->
	<div id="small">
		<img src="img/cat2.jpg" />  //图片自己添加哦
		<!--放大镜,在原图不上的小块-->
		<div id="slider"></div>
	</div>
	<!--放大镜区域-->
	<div id="big">
		<img src="img/cat2_zoom.jpg" /> //图片自己添加哦
	</div>
	<script type="text/javascript">
		var small = document.getElementById("small");
		var slider = document.getElementById("slider");
		var big = document.getElementById("big");
		var bigImg = document.getElementsByTagName("img")[1];
		//让slider跟随鼠标移动.给小的方块绑定事件
		//1.clientX(clientY),鼠标点击的点距离”窗口"上部和左边的距离.
		//2.offsetLeft:该元素的左边框的外边缘到offsetParent元素左边框的内边缘的距离(是到设置的父级的距离).
		//3. offsetWidth = content.width + padding.left + padding.right + border.left + border.right;
		//4.clientWidth = content.width + padding.left + padding.right;
		small.onmousemove = function(e){
			var even = e || event;  //兼容火狐浏览器
			var x = even.clientX - small.offsetLeft - slider.offsetWidth/2;
			var y = even.clientY - small.offsetTop - slider.offsetHeight/2;
			//水平方向的最大值
			var maxX = small.clientWidth - slider.clientWidth;
			//竖直方向的最大值
			var maxY = small.clientHeight - slider.clientHeight;
			if(x<0){
				//相当于超出左侧,超出左侧时,拉回
				x=0;
			}
			//超出右侧时拉回
			if(x>maxX){
				x = maxX;
			}
			//顶部超出
			if(y<0){
				y=0;
			}
			//底部超出
			if(y>maxY){
				y = maxY;
			}
			slider.style.top = y + "px";
			slider.style.left = x + "px";
			//放大的图片的主要实现代码:一个比例计算
			big.scrollLeft = x/maxX * (bigImg.clientWidth - big.clientWidth);
			big.scrollTop = y/maxY * (bigImg.clientHeight -big.clientHeight);
		}
		//鼠标移入事件
		small.onmouseenter = function(){
			//鼠标移入到原图时候实现,上面出现的小的方块
			slider.style.display = "block";
			//右侧的大图区域显示出来图片
			big.style.display = "block";
		}
		//添加鼠标移出事件,鼠标移出原图的时候,
		small.onmouseleave = function(){
			slider.style.display = "none";
		}
	</script>
</body>

CL有木

关注

1
点赞
踩
0

收藏

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

<head> <meta charset="UTF-8"> <title>zoom</title> <style type="text/css"> *{ margin: 0; padding: 0; } #small{ width: 300px; height: 300px; positio...
复制链接

扫一扫