首页 > 代码库 > 拖拽边缘改变窗口（物体）大小

拖拽边缘改变窗口（物体）大小

2024-09-13 06:23:04   217人阅读

技术分享

 

<body> 
　　<div id="div1"></div>
</body>

<style>
　　#div1 {width: 100px; height: 100px; background: red; position: absolute; left: 500px; top: 200px;}
</style>

<script>
　　window.onload = function() {
	
	var oDiv = document.getElementById(‘div1‘);
	
	oDiv.onmousedown = function(ev) {
		
		var ev = ev || event;
		
		var disW = this.offsetWidth;
		var disX = ev.clientX;
		var disL = this.offsetLeft;
		
		var b = ‘‘;
		
		if ( disX > disL + disW - 10 ) {
			//alert( ‘right‘ );
			b = ‘right‘;
		}
		if ( disX < disL + 10 ) {
			//alert( ‘left‘ );
			b = ‘left‘;
		}
		
		document.onmousemove = function(ev) {
			
			var ev = ev || event;
			
			switch( b ) {
				
				case ‘left‘:
					oDiv.style.width = disW - ( ev.clientX - disX ) + ‘px‘;
					oDiv.style.left = disL + ( ev.clientX - disX ) + ‘px‘;
					break;
					
				case ‘right‘:
					oDiv.style.width = disW + ( ev.clientX - disX ) + ‘px‘;
					break;
				
			}
			
		}
		
		document.onmouseup = function() {
			document.onmousemove = document.onmouseup = null;
		}
		
		return false;
		
	}
	
　　}
</script>

拖拽边缘改变窗口（物体）大小


联系
我们