| |
|
|
| | вот какбы такой вопрос, только начал узнавать что такое жс), и хотелось бы услышать про то как вообще реализуются анимации?.. тоесть я вот тут накалякал чтото, не судите строго ибо первое творение на жс,там бред полный получился)..xD
как вот вообще можно реализовать правильное так сказать подобие лупа?)..
тоесть сделать какюто анимацию типа выезжания окна и т.д. с задержкой времени..
я так понял в жс нету слипа=(
<!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">
<Meta Http-equiv="Content-Type" Content="text/html; charset=Windows-1251">
<link href='css/main.css' rel='stylesheet' type='text/css'>
<head></head>
<body>
<style>
.sss{width:100%; height:100%;border:dashed 1px #c1c1c1; background:#d1d1d1; text-align:center; vertical-align:middle;}
</style>
<script type="text/javascript">
i=100;
goback=false;
function cs(val)
{
el = document.getElementById(val);
if(i>0 && goback==false){
i--;
el.style.width=i+'%';
el.style.height=i+'%';
}
else{
goback=true;
}
if(i<100&&goback==true){
i++;
el.style.width=i+'%';
el.style.height=i+'%';
}
else{
goback=false;
}
}
</script>
<table width="100" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="200" height="100"><div id="1" class="sss"></div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="button" value="<go>" name="tr" onclick="setInterval('cs(1)',5)"/>
</div></td>
</tr>
</table>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: sl1p
(29.08.2008 в 10:34)
| | | я так понял в жс нету слипа=(
Есть функция SetTimeOut(). | |
| |
|
|
| |
|
|
| |
для: Seregin
(29.08.2008 в 11:04)
| | | ну это да.. но она ж типа как новый поток открывает(
неудобно немного.. | |
| |
|
|
| |
|
|
| |
для: sl1p
(29.08.2008 в 11:20)
| | | А если рекурсивно вызывать Вашу же функцию через SetTimeOut?
function foo
{
/.../
setTimeOut(foo,'100');
}
|
| |
| |
|
|
| |
|
|
| |
для: Seregin
(29.08.2008 в 12:27)
| | | я пробовал но там в 2 раза длинее код ы ну это разве что для того чтобы ожно быо остановить ) | |
| |
|
|
| |
|
|
| |
для: sl1p
(29.08.2008 в 17:39)
| | | насчёт "в 2 раза длиннее" - это вам показалось :-)
<html>
<head>
<style>
.sss {owerlow: hidden; width: 100%; height: 100%; border: dashed 1px #c1c1c1; background:#d1d1d1; text-align: center}
</style>
<script type="text/javascript">
var R = 100, K = -1;
function cs ()
{
if (R == 100) K = -1; if (R == 1) K = 1; R += K;
with (document.getElementById ('d1').style) {width = R + '%'; height = R + '%'}
setTimeout (cs, 5);
}
</script>
</head>
<body>
<table width="200" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td width="200" height="100"><div id="d1" class="sss"></div></td></tr>
<tr><th><input type="button" value="<go>" name="tr" onclick="cs ()"></th></tr>
</table>
</body>
</html>
|
А вообще - написано неряшливо.
Замечания:
1. Блоки <style></style> и <script></script> необходимо прописывать в заголовке документа (между тегами <head> и </head>) - только тогда браузер эти блоки гарантированно подключит к странице
2. Тег <div> не поддерживает свойство vertical-align. Прописанное вами правило vertical-align:middle; будет проигнорировано всеми браузерами.
3. Странно видеть таблицу, состоящую из одной колонки, в теге <table> которой прописано width="100", при этом ячейке пытаются задать width="200"
4. Никогда не присваивайте именам и идентификаторам значения, содержащие только цифры. Валидные имена могут содержать буквы (в любом регистре), цифры и символ подчеркивания, но начинаться должны с буквы.
5. В ячейке с кнопкой центрирующий <div> явно лишний. Логичнее изменить ячейку на <th>. Что, кстати, предотвратит "дергание" кнопки, кое присуще вашему варианту.
6. Переменная el используется вами только внутри функции. Поэтому есть смысл сделать её локальной, то есть объявить внутри функции - var el = document.getElementById (val);. Это ускорит и облегчит работу браузера - ему незачем будет хранить в памяти ненужный глобальный объект.
7. JS-код, содержащий пробелы между операторами присваивания и аргументами функций и методов, парсится браузером значительно быстрее - это давно доказано экспериментально.
Запись
if(i<100&&goback==true){
i++;
el.style.width=i+'%';
el.style.height=i+'%';
|
будет обрабатываться ДОЛЬШЕ, чем более аккуратная и приятная глазу запись точно того же:
if (i < 100 && goback == true)
{
i++;
el.style.width = i + '%';
el.style.height = i + '%';
|
*Внимательно прочтите | |
| |
|
|
| |
|
|
| |
для: PAT
(29.08.2008 в 18:54)
| | | сенк за замечания)
писал просто в 4 утра)) голова совсем отвалилась..:)
но в принципе сетТаймаут юзают в так сказадь про скриптах для выезжания окон и т.д.?
и ещё, почему в ие данный скрипт выполняется рывками?.. не плавно изменяется.. изменилось гдето на 30% задержка на секунду примерно и пошло дальше=\ | |
| |
|
|
| |
|
|
| |
для: sl1p
(29.08.2008 в 19:09)
| | | setTimeout - однократная временная задержка последующих действий.
setInerval - выполнение действий периодически.
Действия по setInterval вполне можно приостановить - для этого существует метод clearInterval.
Также можно отменить уже идущую однократную задержку - методом clearTimeout. | |
| |
|
|
