js实现鼠标框选图片局部放大

最新推荐文章于 2024-05-30 16:57:29 发布

嘘嘘~

最新推荐文章于 2024-05-30 16:57:29 发布

阅读量890

点赞数

分类专栏：前段小知识文章标签： javascript

本文链接：https://blog.csdn.net/weixin_39839588/article/details/113398018

版权

前段小知识专栏收录该内容

4 篇文章 0 订阅

订阅专栏

js实现鼠标框选图片局部放大

效果如图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="resources/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
		<style type="text/css">
			#bigimgdiv {
				position: absolute;
				display: none;
				overflow: hidden;
				background:#ff00ff;
			}
			.tempDiv{
				border:1px dashed blue;
				background:#ff00ff;
				position:absolute;
				width:0;
				height:0;
				filter:alpha(opacity:10);
				opacity:0.1
			}
		</style>
		<script type="text/javascript">
			$(function() {
				
				//鼠标按键按下事件
				document.onmousedown = function(e) {
					//判断是否已经存在框选的区域，如果有则需清除框选的区域
					var tempDivArr = document.getElementsByClassName("tempDiv");
					if(tempDivArr.length > 0){
						tempDivArr[0].parentNode.removeChild(tempDivArr[0]);
						//bigimgdiv : 大图所在的div
						$("#bigimgdiv").hide();
					}
					var _this = document.getElementById("smallImg");;
					//鼠标框选x坐标起点
					var s_pos_x = e.clientX;
					//判断是否是小图的区域
					if(s_pos_x <  $(_this).offset().left || s_pos_x > $(_this).offset().left+$("#smallImg").width()){
						return;
					}
					//鼠标框选y坐标起点
					var s_pos_y = e.clientY;
					//判断是否是小图的区域
					if(s_pos_y <  $(_this).offset().top || s_pos_y >$(_this).offset().top+$("#smallImg").height() ){
						return;
					}
					
					//生成鼠标框选的div 设置div的坐标起点
					var div = document.createElement("div");
					div.className = "tempDiv";
					div.style.left = s_pos_x + "px";
					div.style.top = s_pos_y + "px";
					document.body.appendChild(div);
					//鼠标移动事件
					document.onmousemove = function(ev) {
						var now_clientX = ev.clientX;
						var now_clientY = ev.clientY;
						//如果鼠标移动的区域超过了图片的边界，则取图片的边界
						if(now_clientX <= $(_this).offset().left ){
							now_clientX = $(_this).offset().left;
						}
						if(now_clientX >= $(_this).offset().left+$("#smallImg").width()){
							now_clientX = $(_this).offset().left+$("#smallImg").width();
						}
						if(now_clientY <= $(_this).offset().top){
							now_clientY = $(_this).offset().top;
						}
						if(now_clientY >= $(_this).offset().top+$("#smallImg").height()){
							now_clientY = $(_this).offset().top+$("#smallImg").height();
						}
						
						//设置此时的框选div的坐标起点与长宽
						div.style.left = Math.min(now_clientX, s_pos_x) + "px";
						div.style.top = Math.min(now_clientY, s_pos_y) + "px";
						div.style.width = Math.abs(s_pos_x - now_clientX) + "px";
						div.style.height = Math.abs(s_pos_y - now_clientY) + "px";
						//鼠标按键松开事件
						document.onmouseup = function() {
							//div.parentNode.removeChild(div);
							document.onmousemove = null;
							document.onmouseup = null;
							// 放大的区域的宽高与小图一样  用小图的宽/框选div的宽为宽放大的倍数
							var ZoomSizeWidth = Math.round($("#smallImg").width() / $(div).width()) ; //宽放大的倍数
							var ZoomSizeHeight =Math.round($("#smallImg").height() / $(div).height()); //高放大的倍数 
							//整张图片的放大倍数取两者之间的小值
							var size = Math.min(ZoomSizeWidth,ZoomSizeHeight);
							//按照放大比例拉伸大图 设置大图的宽高
							var bigWidth = $("#smallImg").width() * size;
							var bigHeight = $("#smallImg").height() * size;
							document.getElementById("bigimg").style.width = bigWidth+ "px";
							document.getElementById("bigimg").style.height = bigHeight+ "px";
							
							/* console.log("s_pos_x:"+s_pos_x);
							console.log("$(_this).offset().left:"+$(_this).offset().left);
							console.log("s_pos_y:"+s_pos_y);
							console.log("$(_this).offset().top:"+$(_this).offset().top);
							console.log("MouseX:"+now_clientX);
							console.log("MouseY:"+now_clientY);
							
							console.log("div的宽："+$(div).width()+ "px")
							console.log("div的高："+$(div).height() + "px")
							console.log("放大div的宽："+$(div).width() * size+ "px")
							console.log("放大div的高："+$(div).height() * size+ "px") */
							//设置展示放大效果图所在的div的宽高
						    document.getElementById("bigimgdiv").style.width = $(div).width() * size+ "px";
							document.getElementById("bigimgdiv").style.height = $(div).height() * size+ "px";
							
							//通过对大图的位置偏移来起到放大的效果
							var tempX = s_pos_x - $(_this).offset().left; 
							var tempY = s_pos_y - $(_this).offset().top;
							$("#bigimg").css("top", -tempY * size).css("left", -tempX * size); 
							//bigimgdiv : 大图所在的div
							$("#bigimgdiv").show();
						}
					}
				}
				


			})
		</script>
	</head>
	<body>
		<div id="img" style=" width:400px; height:400px;margin-left:200px; position:relative; margin-top:50px">
			<img alt="图片" src="images/detail/小图_u683.png" id="smallImg" width="400" height="400" />
		</div>
		<div id="bigimgdiv">
			<img alt="放大后图片" id="bigimg" src="images/detail/大图_u685.png" style="position:absolute;" />
		</div>
	</body>
</html>

嘘嘘~

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js实现鼠标框选图片局部放大

js实现鼠标框选图片局部放大效果如图：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="resources/scripts/jquery-1.7.1.min.js" type="text/javascript"></script> <style type="tex
复制链接

扫一扫