Jump to content
  • 0

аналог margin


Slashka
 Share

Question

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

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

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

Link to comment
Share on other sites

15 answers to this question

Recommended Posts

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

elem.style.top

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

Итого:

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

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

Link to comment
Share on other sites

  • 0

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

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

<!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>

Link to comment
Share on other sites

  • 0
<!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>

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

<!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>

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

Link to comment
Share on other sites

  • 0

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

<!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'у за помощь!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy