拖拽改变层大小例如:浏览器的窗口大小改变

这个示例展示了如何通过JavaScript实现拖拽功能来改变HTML元素(如div)的宽度和高度。当用户点击并拖动div的边缘时,根据鼠标移动的位置,元素的尺寸会相应调整。该代码涉及鼠标事件处理、元素定位和动态样式更新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖拽改变层大小</title>
	<style type="text/css">
		#div1{
			width:100px;
			height:100px;
			background:red;
			position:absolute;
			left:500px;
			top:200px;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv  = document.getElementById("div1");
			var b = "";
			oDiv.onmousedown = function(ev){
				var ev = ev || event;
				var disW = this.offsetWidth;//oDiv的宽
				var disX = ev.clientX;//鼠标点击的位置距离浏览器可视区左边的距离
				var disL = this.offsetLeft;//oDiv的left值
				var disH = this.offsetHeight;//oDiv的高
				var disY = ev.clientY;//鼠标点击的位置距离浏览器可视区上边的距离
				var disT = this.offsetTop;//oDiv的top值
				if(disX>disL+disW-10){
				// 如果鼠标点击的位置距离浏览器可视区左边的距离大于(oDiv的left值+oDiv的宽-10)
				//在这里不用再判断小于(oDiv的left值+oDiv的宽)的情况,因为如果大于了,鼠标早已不在oDiv上了
				b = "right"}
				if(disX<disL+10){
				// 如果鼠标点击的位置距离浏览器可视区左边的距离小于(oDiv的left值+10)
				//在这里不用再判断大于(oDiv的left值)的情况,因为如果小于了,鼠标早已不在oDiv上了

				b = "left";}
				if(disY<disT +10){
								// 如果鼠标点击的位置距离浏览器可视区上边的距离小于(oDiv的top值+10)//在这里不用再判断大于(oDiv的top值)的情况,因为如果值小于了,鼠标早已不在oDiv上了
								b = "Top";}
				if(disY>disT +disH-10){
								// 如果鼠标点击的位置距离浏览器可视区上边的距离大于(oDiv的top值+oDiv的高-10)//在这里不用再判断小于(oDiv的top值+oDiv的高)的情况,因为如果值大于了,鼠标早已不在oDiv上了
								 b = "Bottom";}
				document.onmousemove = function(ev){
					var ev = ev || event;
					switch(b){
						case 'right':
						oDiv.style.width = disW+(ev.clientX-disX)+"px";
						//其中ev.clientX-disX的差值是移动的距离,或正或负值
 						break;
						case "left":
						oDiv.style.width = disW-(ev.clientX-disX)+"px";
						oDiv.style.left = disL+(ev.clientX-disX)+"px"; 
						break; 
						case 'Top':
						oDiv.style.height = disH-(ev.clientY-disY)+"px";
						oDiv.style.top = disT+(ev.clientY-disY)+"px"; 
						break;
						case 'Bottom':
						oDiv.style.height = disH+(ev.clientY-disY)+"px"; 
						break;
						}
					}
				document.onmouseup = function(){
                                  document.onmousemove = document.onmouseup = null;
                              }
                                   return false;
                            }
              }
</script>
</head>
<body>
<div id="div1"></div></body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值