Форум

новечёк · #1 (**permalink**) 03.12.2011, 09:44

подскажите пожалуйста... как задать на сколько двигатся в верх и вниз обекту? вот скрипт....
прошу строго не судить... я в этом новенький ,пытался гуглить ковырялся сам в этом скрипте,почити всё настроил но разобратся не могу с с размерами подёма и отпуска обекта...

<script language="JavaScript">
var eypos=-200, ejump=-4;
var typos=-260, tjump=-4;
var delay=2;
function do_menue()
{
if(typos>-260)
{
tjump=-4;
if(typos>=130)
head_fahren();
}
ejump=-ejump;
if(eypos<=-200 || eypos>=20)
menue_fahren();
}
function menue_fahren()
{
if(document.layers) document.menue.top=eypos; else document.all.menue.style.top=eypos;
eypos+=ejump;
if(eypos>-200 && eypos<20)
setTimeout("menue_fahren()", delay);
}
function do_head()
{
if(eypos>-200)
{
ejump=-4;
if(eypos>=25)
menue_fahren();
}
tjump=-tjump;
if(typos<=-260 || typos>=130)
head_fahren();
}
function head_fahren()
{
if(document.layers) document.head.top=typos; else document.all.head.style.top=typos;
typos+=tjump;
if(typos>-260 && typos<130)
setTimeout("head_fahren()", delay);
}
</script>
<div
 style="position: absolute; z-index: 2;top: 25px; width: 107px; height: 50px; left: 910px;"><a
 href="javascript:do_menue()">МЕНЮ</a></div>



<div id=menue style=" position:absolute; left:200;top: -70px">

<a
href=""><img
 style="border: 0px solid ; width:700px; height: 50px;top:-55px;  left:-100px;"
alt="" src="http://creation.x2x.me/jpg/bezimeni-1_02.jpg">
</a>
<a
style="border: 0px solid ; width: 50px; height: 50px; position: absolute; top:8px; left:250px;"
 onmouseover="window.status='Link 3' ;return true" href=""
 target="dummy">[Link 3]</a>
<a
style="border: 0px solid ; width: 50px; height: 50px; position: absolute; top:8px; left:300px;"
 onmouseover="window.status='Link 4' ;return true" href=""
 target="dummy">[Link 4]</a>
<a
style="border: 0px solid ; width: 50px; height: 50px; position: absolute; top:8px; left:350px;"
 onmouseover="window.status='Link 5' ;return true" href=""
 target="dummy">[Link 5]</a>
<a
style="border: 0px solid ; width: 50px; height: 50px; position: absolute; top:8px; left:400px;"
 onmouseover="window.status='Link 7' ;return true" href="http://vkontakte.ru">[Link 7]</a>

</div>
</html>

nerv_ · #2 (**permalink**) 03.12.2011, 10:26

новечёк, Ваш пример я разбирать не буду. Если уж совсем просто, то так:

<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div { background-color:green; height:400px; width:400px; }
		</style>
		<script type="text/javascript">
			var i = 0;
			function jsl() {
				for(; i<100; i++) {
					document.getElementsByTagName('div')[0].style.marginLeft = i+'px';
				}
			}
			function jsr() {
				for(; i>0; i--) {
					document.getElementsByTagName('div')[0].style.marginLeft = i+'px';
				}
			}
		</script>
	</head>
	<body>
		<div onmouseover="jsl();" onmouseout="jsr();"></div>
	</body>
</html>

Gozar · #3 (**permalink**) 03.12.2011, 12:16

nerv_,
for в твоем скрипте не нужен, т.к. перенос будет мгновенным. Изменение css style очень тормозная вещь. Браузер просто не успеет отрисовать переход. Пользуйтесь setTimeout.

новечёк,
Пользуйся фигурными скобками. У js есть общепринятый стиль написания кода.

новечёк · #4 (**permalink**) 03.12.2011, 18:04

спасибо уже сам разобрался...

вот как хотел...

<script language="JavaScript">
var eypos=-200, ejump=-13;
var typos=-260, tjump=-13;
var delay=2;
function do_menue()
{
if(typos>-260)
{
tjump=-13;
if(typos>=130)
head_fahren();
}
ejump=-ejump;
if(eypos<=-200 || eypos>=20)
menue_fahren();
}
function menue_fahren()
{
if(document.layers) document.menue.top=eypos; else document.all.menue.style.top=eypos;
eypos+=ejump;
if(eypos>-200 && eypos<20)
setTimeout("menue_fahren()", delay);
}
function do_head()
{
if(eypos>-200)
{
ejump=-13;
if(eypos>=25)
menue_fahren();
}
tjump=-tjump;
if(typos<=-260 || typos>=130)
head_fahren();
}
function head_fahren()
{
if(document.layers) document.head.top=typos; else document.all.head.style.top=typos;
typos+=tjump;
if(typos>-260 && typos<130)
setTimeout("head_fahren()", delay);
}



</script>
<div
 style="position: absolute; z-index: 2;top: 25px; width: 107px; height: 50px; left: 910px;"><a
 href="javascript:do_menue()">МЕНЮ</a></div>



<div id=menue style=" position:absolute; left:200;top: -70px">

<a

href=""><img
 style="border: 0px solid ; width:700px; height: 50px;top:-55px;  left:-100px;"
alt="" src="http://creation.x2x.me/jpg/bezimeni-1_02.jpg">
</a>
<a
style="border: 0px solid ; width: 50px; height: 50px; position: absolute; top:8px; left:250px;"
 onmouseover="window.status='Link 3' ;return true" href=""
 target="dummy">[Link 3]</a>
<a
style="border: 0px solid ; width: 50px; height: 50px; position: absolute; top:8px; left:300px;"
 onmouseover="window.status='Link 4' ;return true" href=""
 target="dummy">[Link 4]</a>
<a
style="border: 0px solid ; width: 50px; height: 50px; position: absolute; top:8px; left:350px;"
 onmouseover="window.status='Link 5' ;return true" href=""
 target="dummy">[Link 5]</a>
<a
style="border: 0px solid ; width: 50px; height: 50px; position: absolute; top:8px; left:400px;"
 onmouseover="window.status='Link 7' ;return true" href="http://vkontakte.ru">[Link 7]</a>
<a
style="border: 0px solid ; width: 50px; height: 50px; position: absolute; top:8px; left:450px;"
 onmouseover="window.status='Link 7' ;return true" href="http://vkontakte.ru">[Link 7]</a>
</div>
</html>

nerv_ · #5 (**permalink**) 03.12.2011, 20:54

Gozar, ага, я это знаю, но все равно спасибо) Только учусь

Форум

Справочник

Discord чат

Курсы javascript