Форум

Golovastik · #21 (**permalink**) 20.08.2010, 17:58

Есть вопрос по поводу предыдущего кода:

<html>
	<head><title>Привет</title>
	<script type='text/javascript'>
var a, pause = 1500,
	    id, i, dir;
	 
	function g() {
	    var b = document.getElementById("maksImg");
	    b.style.top = i < 50 ? i : "50"+"px";
	    if (dir == 1) i++;
	    else i--;
	    if (i >= 50) {
	        dir = -1;
	       clearInterval(id);
	        window.setTimeout('id = setInterval("g()",5)', pause);
	   }
	    if (i < -90) {
        clearInterval(id);
	        b.style.display = "none"
	    }
	}
	 function f() {
	 //   if(id)clearInterval(id);
	    document.getElementById("maksImg").style.display = "block";
	    i = -90;
	    dir = 1;
	    id = setInterval("g()", 5);
}
 
	</script>
	 
	</head>
	<body>
	Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>
	Такого пса я не видел никогда в жизни в этом мире. Вот что<br>
	значит настоящая
	псина.Такой псины я <br>
	не видал за все свои 20 лет жизни. Это была одна из лучших <br>
	псин,среди тех когда мне приходилось видеть собак. <br>
	 
	<input type='button' value='кнопка' onClick='f()'>

	<div id="maksImg" style="display:none; position:absolute;
	left:100px; top:-90px;"><img src='2.gif' ></div> <br><br>
	 
	</body>
	</html>

Скажите, почему в браузере ИЕ, медленее, чем в других браузерах, как исправить выезд чтоб был бычтрее ,как и у других браузерах?

Golovastik · #22 (**permalink**) 20.08.2010, 18:08

Ещё вопрос почему если даже сетинтервал сделать в 0, вс равно долго выезжать будет, а не резко выехать постоять немножко и заехать резко назад? Как сделать чтоб движение во всех браузерах было одинаковое?

PeaceCoder · #23 (**permalink**) 20.08.2010, 18:44

Сообщение от Golovastik

Странно, но при нажатии на кнопку ничего не выводится.

Код бы в стадии тестирования видимо на тот момент

Сообщение от Golovastik

Скажите, почему в браузере ИЕ, медленее, чем в других браузерах, как исправить выезд чтоб был бычтрее ,как и у других браузерах?

потому что ИЕ тормоз.

Сообщение от Golovastik

Ещё вопрос почему если даже сетинтервал сделать в 0, вс равно долго выезжать будет, а не резко выехать постоять немножко и заехать резко назад? Как сделать чтоб движение во всех браузерах было одинаковое?

0 не говорит что задержек не будет. это говорит о том что функция выполнится как только браузер будет свободен (как можно быстрее).
На счет того как выравнять- можете даже не парится. каждый браузер работает со своей скоростью. самый тормоз - ИЕ, потом мозила, потом опера, хром, а за сафари незнаю, но он стоит по скорости почти в одном ряду с оперой и хромом.

Golovastik · #24 (**permalink**) 20.08.2010, 20:19

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

рони · #25 (**permalink**) 20.08.2010, 21:00

Golovastik,
ограничить/установить общее время выезда а не i++; каждые 5 миллисекунд

Golovastik · #26 (**permalink**) 20.08.2010, 22:24

Как это примерно, немножко напишите.

рони · #27 (**permalink**) 20.08.2010, 23:35

Пример: Ой написал )))

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
  <title>Привет</title>
<script type='text/javascript'>
function slide(b, h, f, d, i, c) {
    var e = RegExp("(" + h + ".*?)([-+]?\\d+\\.?\\d*)", "i");
    b.timer && window.clearTimeout(b.timer);
    c = typeof c == "function" ? c : false;
    var a = b.style.cssText;
    e.test(a) || (a += "; top: " + d + "px;");
    var j = (new Date).getTime();
    setTimeout(function () {
        var g = ((new Date).getTime() - j) / i;
        a = a.replace(e, "$1" + Math.floor((f - d) * g + d));
        b.style.cssText = a;
        if (g < 1) b.timer = setTimeout(arguments.callee, 35);
        else {
            a = a.replace(e, "$1" + f);
            b.style.cssText = a;
            c && c()
        }
    }, 10)
};

function f_top(){
var b = document.getElementById("maksImg"), pause = 1500, time = 3000, old = -90, to = 50 , direction= "top";
slide(b,direction, to, old, time,function(){window.setTimeout(function(){slide(b,direction, old, to, time)}, pause)})
}

function f_left(){
var b = document.getElementById("maksImg2"), pause = 1500, time = 3000, old = -336, to = 50 , direction= "left";
slide(b,direction, to, old, time,function(){window.setTimeout(function(){slide(b,direction, old, to, time)}, pause)})
}




</script>
</head>

<body>
  Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>
  Такого пса я не видел никогда в жизни в этом мире. Вот что<br>
  значит настоящая псина.Такой псины я<br>
  не видал за все свои 20 лет жизни. Это была одна из лучших<br>
  псин,среди тех когда мне приходилось видеть собак.<br>

  <form>
    <input type='button' value='сверху' onclick='f_top()'>
    <input type='button' value='слева' onclick='f_left()'>
  </form>

  <div id="maksImg" style="display:block; position:absolute; left:100px; top:-90px;">
    <img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif'>
  </div>

  <div id="maksImg2" style="display:block; position:absolute; left:-336px; top:20px;">
    <img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif'>
  </div><br>
  <br>
</body>
</html>

Golovastik · #28 (**permalink**) 20.08.2010, 23:41

Во так вроде,резко выехало, остановилось на 1 сек и заехало, похоже на нормальное движение картинки?

<html>
<head><title>Привет</title>
<script type='text/javascript'>
var time_down = 500;
var time_stop = 1000;
var time_up = 500;
var max_top = 50;

var id, i, scale;

function move_down() {
i += scale;
document.getElementById("maksImg").style.top = i + "px";
if (i >= max_top) {
clearInterval(id);
setTimeout("move_pause();", time_stop);
}
}

function move_pause() {
scale = 1;
var interval = time_up / (max_top + 90);
while (interval < 15) { interval *= 2; scale *= 2; }
id = setInterval("move_up();", interval);
}

function move_up() {
i -= scale;
document.getElementById("maksImg").style.top = i + "px";
if (i <= -90) {
clearInterval(id);
document.getElementById("maksImg").style.display = "none";
}
}

function f() {
document.getElementById("maksImg").style.display = "block";
i = -90; scale = 1;
var interval = time_down / (max_top + 90);
while (interval < 15) { interval *= 2; scale *= 2; }
id = setInterval("move_down();", interval);
}

</script>

</head>
<body>
Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>
Такого пса я не видел никогда в жизни в этом мире. Вот что<br>
значит настоящая
псина.Такой псины я <br>
не видал за все свои 20 лет жизни. Это была одна из лучших <br>
псин,среди тех когда мне приходилось видеть собак. <br>

<input type='button' value='кнопка' onClick='f()'>

<div id="maksImg" style="display:none; position:absolute;
left:100px; top:-90px;"><img src='2.gif' ></div> <br><br>

</body>
</html>

Golovastik · #29 (**permalink**) 20.08.2010, 23:59

Заметил проблемку в моём коде ,что если 5 раз нажать на кнопку без передышки,получаются глюки какие-то, а потом на 66-ой раз вообще кнопка не будет работать.
Редактировать/удалить сообщение

Golovastik · #30 (**permalink**) 21.08.2010, 00:11

А на джейквери попробовал так, не работает,прост нажимается и ничего не происходит.

Цитата:

<!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><title>Проба</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="jquery.js"></script>

<script type='text/javascript'>
function f(){
$('#maskImg').hide(300);
}
</script>
</head>

<body>

Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>
Такого пса я не видел никогда в жизни в этом мире. Вот что<br>
значит настоящая
псина.Такой псины я <br>
не видал за все свои 20 лет жизни. Это была одна из лучших <br>
псин,среди тех когда мне приходилось видеть собак. <br>

<input type='button' value='кнопка' onClick='f()'>
<div id="maksImg" style="display:none; position:absolute;
left:100px; top:-90px;"><img src='2.gif' ></div> <br><br>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript