Показать сообщение отдельно
  #7 (permalink)  
Старый 24.07.2008, 13:52
Гость
 
Сообщений: n/a

Доделать не успеваю - надо бежать в столовую...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<style>
	* {
		margin:0;
		padding:0;
	}
	#line {
		position: relative;
		top: 100px;
		left: 100px;
		width: 101px;
		height: 101px;
	}
	.line1, .line2 {
		position: absolute;
		width: 0px;
		height: 0px;
		font-size: 0px;
		border-right: 100px solid #000;
		border-left: 0px solid #000;
		border-top: 100px solid transparent;
	}
	.line2 {
		left: 1px;
		top: 1px;
		border-right-color: #fff;
		border-left-color: #fff;
		border-top-color: transparent;
	}
	.lb, .rt {
		position: absolute;
		width: 2px;
		height: 2px;
		font-size: 0px;
		background: #f00;
		border: 2px solid #000;
		z-index: 1;
		cursor: pointer;
	}
	.lb {
		left: 0px;
		bottom: 0px;
	}
	.rt {
		right: 0px;
		top: 0px;
	}
	#tra {position: absolute;}
</style>
</head>
<body>
<div id="tra"></div>
<div id="line"><div class="line1"></div><div class="line2"></div><div id="lb" class="lb"></div><div id="rt" class="rt"></div></div>
<script type="text/javascript">
function $(i){return document.getElementById(i)}
function trace(m){$('tra').innerHTML = m}

function Down(e){
	e = e || window.event;
	
	var type = this.className;
	
	var o = $('line');
	o.StartWidth = o.offsetWidth;
	o.StartHeight = o.offsetHeight;
	o.StartX = e.clientX;
	o.StartY = e.clientY;
	
	document.onmousemove = function(evt){
		evt = evt || window.event;
		switch(type) {
			case 'lb':	var w = o.StartWidth + o.StartX - evt.clientX;
						var h = o.StartHeight - o.StartY + evt.clientY;
				break;
			case 'rt':	var w = o.StartWidth - o.StartX + evt.clientX;
						var h = o.StartHeight + o.StartY - evt.clientY;
				break;
		}
		var left = width = false;
		if(h<0){
			h=-h;
			left = true;
		}
		if(w<0){
			w=-w;
			left = width = true;
		}
		
		trace('left = '+left+'<br>width = '+width+'<br>type = '+type+'<br>');
		
		if(left){
			o.firstChild.style.borderRightWidth = o.childNodes[1].style.borderRightWidth = '0px';
			o.firstChild.style.borderLeftWidth = o.childNodes[1].style.borderLeftWidth = o.style.width = w + 'px';
			o.childNodes[1].style.left = '-1px';
			if (width&&type=='rt') o.style.left = evt.clientX + 'px';
			if (!width&&type=='lb') o.style.top = evt.clientY + 'px';
			
		}
		else {
			o.firstChild.style.borderLeftWidth = o.childNodes[1].style.borderLeftWidth = '0px';
			o.firstChild.style.borderRightWidth = o.childNodes[1].style.borderRightWidth = o.style.width = w + 'px';
			o.childNodes[1].style.left = '1px';
			if (type=='rt') o.style.top = evt.clientY + 'px';
			else o.style.left = evt.clientX + 'px';
		}
		
		o.firstChild.style.borderTopWidth = o.childNodes[1].style.borderTopWidth = o.style.height = h + 'px';
	}
	document.onmouseup = function(){
		document.onmousemove = null;
		document.onmouseup = null;
	}
}

$('lb').onmousedown = Down;
$('rt').onmousedown = Down;
</script>
</body>
</html>

Последний раз редактировалось Андрей Параничев, 24.07.2008 в 14:44. Причина: Пользуйтесь, пожалуйста, bb-кодами для оформления листингов кода с теле сообщения.
Ответить с цитированием