аналог margin

Slashka · May 30, 2008

есть блок, который должен выезжать вниз. была задана функция

function movemenu() {
		if (step>=0) {
			document.all.menu1.style.posTop+=step
			step--			
			var movetimer=setTimeout("movemenu()",pause)		

	 }
		else {
			clearTimeout(movetimer)
		}
}
var step=20
var pause=5

menu1 абсолютно позиционированно, все замечательно работает...

Когда убраю позиционирование и заменяю posTop на marginTop:

function movemenu() {
		if (step>=0) {
			document.all.menu1.style.marginTop+=step
			step--			
			var movetimer=setTimeout("movemenu()",pause)

	 }
		else {
			clearTimeout(movetimer)
		}
}
var step=20
var pause=5

блок смещается, но резко, т.е. не выплывает, почему-то не работает пауза. Как это исправить?

ZoNT · May 30, 2008

marginTop

posTop - нет такого, есть elem.style.top

Slashka · May 30, 2008

marginTop
posTop - нет такого, есть elem.style.top

а просто top у меня почему-то не работает... posTop-это не переменная...

ZoNT · May 30, 2008

у тебя не работает потому что:

elem.style.top

elem.style.marginTop - это СТРОКИ (допустим "15рх")

Итого:

document.all.menu1.style.marginTop+=step - получится "15рх20"

Slashka · May 30, 2008

у тебя не работает потому что:
elem.style.top
elem.style.marginTop - это СТРОКИ (допустим "15рх")
Итого:
document.all.menu1.style.marginTop+=step - получится "15рх20"

а как тогда сделать?.... как из строки извлечь значение?

ZoNT · May 30, 2008

document.all.menu1.style.marginTop = parseInt(document.all.menu1.style.marginTop)+step;

Slashka · May 30, 2008

все равно не работает...

вот мой код целиком:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выдвигающееся меню</title>

<style>
#menu1 { position:absolute; background-color:#FFCCCC; width:200px; padding:10px;}
<!--здесь убираю position-->
</style>

<script>
var pace=14

var step
var pause=5

var vozr=-1


function getmenuname() {
			step=pace
			checkdirection()
	 		movemenu()
}

function checkdirection() {
		vozr=vozr*-1
}

function movemenu() {
		if (step>=0) {
		   document.all.menu1.style.posTop+=step*vozr;
<!--здесь вставляю document.all.menu1.style.marginTop = parseInt(document.all.menu1.style.marginTop)+step;-->
			step--
			var movetimer=setTimeout("movemenu()",pause)  
	 }
		else {
			clearTimeout(movetimer)
		}
}
</script>
</head>


<body> 

<div id="menu1">
	<b onclick="getmenuname()">нажми</b>
</div>

</body>

</html>

ZoNT · May 30, 2008

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выдвигающееся меню</title>

<style>
	* {
		margin: 0px;
		padding: 0px;
	}

	#menu1 {
		position: relative;
		background: #FCC;
		width: 200px;
		height: 30px;
		line-height: 30px;
		padding: 0px 10px;
	}
</style>

<script>
var pace = 14;
var step;
var pause = 5;
var vozr = -1;

function getmenuname() {
	step = pace;
	vozr = -vozr;

	movemenu();
}

function movemenu() {
	if (step>=0) {
		var elem = document.getElementById('menu1');
		elem.style.top = elem.offsetTop + step*vozr + 'px';
		step--;
		var movetimer=setTimeout("movemenu()",pause)  
	}
	else clearTimeout(movetimer);
}
</script>
</head>
<body> 
	<div id="menu1">
		<b onclick="getmenuname()">нажми</b>
	</div>
</body>
</html>

Slashka · May 30, 2008

спасибо! Но блок же все-равно позиционирован.... Мне надо, чтобы позиционирования не было вообще. Т.е. если под блоком что-нибудь написать, или еще добавить блоки, то вся конструкция опускалась бы вниз без перекрывания...

ZoNT · May 30, 2008

ну так релэйтив так себя и вед?т...

Slashka · May 30, 2008

что-то я уже запуталась, у меня он себя по-другому ведет...покажите, пожалуйста, куда вставить, например текст "длрдлрорилои", чтобы блок его сдвигал вниз...

или можно стиль прописать вообще без позиционирования, через float, и так же менять маргин?

ZoNT · May 30, 2008

ну ладно-ладно, на:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>┬√фтшур■∙хх?  ьхэ■</title>

<style>
	* {
		margin: 0px;
		padding: 0px;
	}

	#menu1 {
		position: relative;
		background: #FCC;
		width: 200px;
		height: 30px;
		line-height: 30px;
		padding: 0px 10px;
	}
</style>

<script>
var pace = 14;
var step;
var pause = 5;
var vozr = -1;

function getmenuname() {
	step = pace;
	vozr = -vozr;

	movemenu();
}

function movemenu() {
	if (step>=0) {
		var elem = document.getElementById('menu1');
		elem.style.marginTop = elem.offsetTop + step*vozr + 'px';
		step--;
		var movetimer=setTimeout("movemenu()",pause)  
	}
	else clearTimeout(movetimer);
}
</script>
</head>
<body> 
	<div id="menu1">
		<b onclick="getmenuname()">эрцьш</b>
	</div>
	<div>dafgl/kdgfkhmf;dkg</div>
</body>
</html>

вот ну никто думать сам не хочет!!!

ZoNT · May 30, 2008

и позишн можешь убрать, если он тебя смущает...

Slashka · May 30, 2008

ZoNT! Спасибо Вам огромное, Вы мне очень помогли!

Я только изучаю JavaScript, и еще путаюсь... Спасибо!

ZoNT · May 30, 2008

не за что...

Slashka · June 2, 2008

В общем вот, что у меня получилось:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Меню</title>

<style>
	* {
		margin: 0px;
		padding: 0px;
	}

   body a{
   cursor: pointer;} 
	#menu1 {
	position:relative;
		background: #FF9966;
		width: 299px;
		line-height: 30px;
		padding: 0px 10px;
		z-index:400;
	}

	.logo{ position:absolute; top:81px; width:299px; background-color:#FF99FF; text-align:center; padding:10px; left:0px; z-index:500;}

	.logo2{position: relative; width:299px; top:10px; background-color: #99FF99; text-align:center; padding:10px 96px; z-index:400;}

.box{ float:left; width:340px; z-index:50;}

.col{ position: absolute; width:340px; height:61px; background-color:#FFFFFF; font-size:24px; padding-top:20px; left:0px; z-index:500;}

   #menu2 {
		position: absolute;
		top:0px;
		background: #CCCCFF;
		width: 299px;
		line-height: 30px;
		padding: 39px 10px 0px 10px;
		z-index:300;
		left:0px;
	}



</style>

<script>

var v=-1;

var pace = 15;
var step;
var pause = 5;
var vozr = -1;

var pace2 = 15;
var step2;
var vozr2 = -1;

function getmenuname() {
	step = pace;
	vozr = -vozr;

	step2 = pace2;
	vozr2=vozr;

	movemenu();
	movemenu2();
}

function getmenuname2() {
	step2 = pace2;
	vozr2 = -vozr2;

	v=-v;
	movemenu2();
}

function movemenu() {
	if (step>=0) {
		var elem = document.getElementById('menu1');
		elem.style.marginTop = elem.offsetTop + step*vozr + 'px';
		step--;
		var movetimer=setTimeout("movemenu()",pause)  
	}
	else {
	clearTimeout(movetimer);
	vozr2=v;
	}

}

function movemenu2() {
	if (step2>=0) {
		var elem = document.getElementById('menu2');
		elem.style.marginTop = elem.offsetTop + step2*vozr2 + 'px';
		step2--;
		var movetimer=setTimeout("movemenu2()",pause)  
	}
	 else{ clearTimeout(movetimer);
	}
}

</script>
</head>
<body> 

	<a href="#" onclick="getmenuname()">
		<b class="logo">
			нажми
		</b>
	</a>
	<b class="col">
		Выплывающее меню.
	</b>
	<div class="box">
	<div id="menu1">
		<a href="#">ссылка1</a>
		<p>
		<a href="#">ссылка2</a>
		<p>
		<a href="#">ссылка3</a>
		<p>
		<a href="#" onclick="getmenuname()">нажми чтоб закрыть</a>
	</div>

	<a href="#" onclick="getmenuname2()">
		<b class="logo2">
			И еще раз нажми 
		</b>
	</a>

	<div id="menu2">
		<a href="#">ссылка1</a>
		<p>
		<a href="#">ссылка2</a>
		<p>
		<a href="#">ссылка3</a>
		<p>
		<a href="#" onclick="getmenuname2()">нажми чтоб закрыть</a>
	</div>



	</div>

	</body>
</html>

Еще раз спасибо ZoNT'у за помощь!

Sign In

аналог margin

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information