За последние 24 часа нас посетили 42580 программистов и 1814 роботов. Сейчас ищут 1098 программистов ...

Функция задержки

Тема в разделе "JavaScript и AJAX", создана пользователем Golovastik, 19 авг 2010.

  1. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    Пробую для эксперимента написать чтоб при нажатии на кнопку происхдила задержка картинки, но при нажатии на кнопку ничего не происходит, не знаю почему, как исправить?

    Код (Text):
    1.  
    2. <html>
    3. <head><title>Привет</title>
    4. <script type='text/javascript'>
    5. var a,b,timeout,zadershka;
    6.  
    7. function f(){
    8. zadershka = setTimeout(
    9. function() {
    10. if(!b)
    11. b = document.getElementById('maks');
    12. b.style.display='block';},
    13. 2000);
    14. };
    15.  
    16. </script>
    17.  
    18. </head>
    19. <body>
    20. Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>
    21. Такого пса я не видел никогда в жизни в этом мире. Вот что<br>
    22. значит настоящая
    23. псина.Такой псины я <br>
    24. не видал за все свои 20 лет жизни. Это была одна из лучших <br>
    25. псин,среди тех когда мне приходилось видеть собак. <br>
    26.  
    27. <input type='button' value='кнопка' id='maks' onClick='f3()'>
    28. <div id="tak" style="display:none; position:absolute;
    29. left:300px; top:0px;"><img src='2.gif' ></div> <br><br>
    30.  
    31. </body>
    32. </html>
     
  2. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    Исправил. Вот так тоже не работает.
    Код (Text):
    1.  
    2. <html>
    3. <head><title>Привет</title>
    4. <script type='text/javascript'>
    5. var a,b,timeout,zadershka;
    6.  
    7. function f(){
    8. zadershka = setTimeout(
    9. function() {
    10. if(!b)
    11. b = document.getElementById('maks');
    12. b.style.display='block';},
    13. 2000);
    14. };
    15.  
    16. </script>
    17.  
    18. </head>
    19. <body>
    20. Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>
    21. Такого пса я не видел никогда в жизни в этом мире. Вот что<br>
    22. значит настоящая
    23. псина.Такой псины я <br>
    24. не видал за все свои 20 лет жизни. Это была одна из лучших <br>
    25. псин,среди тех когда мне приходилось видеть собак. <br>
    26.  
    27. <input type='button' value='кнопка' id='maks' onClick='f()'>
    28. <div id="maks" style="display:none; position:absolute;
    29. left:300px; top:0px;"><img src='2.gif' ></div> <br><br>
    30.  
    31. </body>
    32. </html>
    Я хочу при нажатии на кнопку, чтоб картинка повисела 2 секунды и исчезла
    Так не выходит.
     
  3. Михаил

    Михаил Активный пользователь

    С нами с:
    12 июл 2009
    Сообщения:
    545
    Симпатии:
    0
    Адрес:
    Bielarus
    Элемент ID может быть только один на странице...
    У тебя просто выбирает не тот элемент.

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

    <div id="maks" style="display:none; position:absolute;

    Исправь в диве на другой идентификатор.
     
  4. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    Спс, сделал.
    Скажите пожалуйста ,а как сделать такие кнопки на Яваксрипт синие, чтоб такое происходило при наведении мышкой как на этом сайте
    http://213.248.58.131/
     
  5. Михаил

    Михаил Активный пользователь

    С нами с:
    12 июл 2009
    Сообщения:
    545
    Симпатии:
    0
    Адрес:
    Bielarus
    так это не кнопки а обчыные дивы, посмотрите исходный текст страницы, там всё видно, что при наведении на кнопку сменить стиль и всё.
    можно это в css:
    [css]
    .class:hover{color:red;}[/css]
    ну что-то около этого
     
  6. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    Так там когда навёл на синюю кнопку она несколько раз уменьшается, а не просто изменилось на другую картинку 1 раз и всё. Сколько там картинок использовалось?
     
  7. Apple

    Apple Активный пользователь

    С нами с:
    13 янв 2007
    Сообщения:
    4.984
    Симпатии:
    2
    Golovastik
    Ёпт, там используются паршивые GIF-ки, прикрученные коряво к CSS через JavaScript:
    http://213.248.58.131/val/anibtn.gif
     
  8. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    По поводу предыдущего кода.
    Код (Text):
    1.  
    2. <html>
    3.     <head><title>Привет</title>
    4.     <script type='text/javascript'>
    5. var a, pause = 1500,
    6.         id, i, dir;
    7.      
    8.     function g() {
    9.         var b = document.getElementById("maksImg");
    10.         b.style.top = i < 50 ? i : "50"+"px";
    11.         if (dir == 1) i++;
    12.         else i--;
    13.         if (i >= 50) {
    14.             dir = -1;
    15.            clearInterval(id);
    16.             window.setTimeout('id = setInterval("g()",1)', pause);
    17.        }
    18.         if (i < -90) {
    19.         clearInterval(id);
    20.             b.style.display = "none"
    21.         }
    22.     }
    23.      function f() {
    24.      //   if(id)clearInterval(id);
    25.         document.getElementById("maksImg").style.display = "block";
    26.         i = -90;
    27.         dir = 1;
    28.         id = setInterval("g()", 10);
    29. }
    30.  
    31.     </script>
    32.      
    33.     </head>
    34.     <body>
    35.     Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>
    36.     Такого пса я не видел никогда в жизни в этом мире. Вот что<br>
    37.     значит настоящая
    38.     псина.Такой псины я <br>
    39.     не видал за все свои 20 лет жизни. Это была одна из лучших <br>
    40.     псин,среди тех когда мне приходилось видеть собак. <br>
    41.      
    42.     <input type='button' value='кнопка' onClick='f()'>
    43.  
    44.     <div id="maksImg" style="display:none; position:absolute;
    45.     left:100px; top:-90px;"><img src='2.gif' ></div> <br><br>
    46.      
    47.     </body>
    48.     </html>
    Возникла проблема нельзя сделать резкий выезд, остановку и заезд назад картинки вверх браузера этим кодом, она движется но не резко, даже если сетинтервал поставить в 1, резко двигаться не будет картинка, что можно сделать?
     
  9. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    А на джейквери попробовал так, не работает,прост нажимается и ничего не происходит.