За последние 24 часа нас посетили 24236 программистов и 2408 роботов. Сейчас ищут 1155 программистов ...

анимация через setInterval

Тема в разделе "JavaScript и AJAX", создана пользователем Norair_986, 3 окт 2025.

  1. Norair_986

    Norair_986 Новичок

    С нами с:
    3 фев 2025
    Сообщения:
    7
    Симпатии:
    0
    по коду можно понять что я делаю анимацию
    вот код, в чем ошибка?
    HTML:
    1. <!doctype html>
    2.   <head>
    3.     <meta charset="utf-8" />
    4.     <title>Моя тестовая страница</title>
    5.     <style>
    6.             #layer1 { z-index: 1;position:absolute; }
    7.             #layer2 { z-index: 2; position:absolute;}
    8.             #layer3 { z-index: 3;position:absolute; }
    9.     </style>
    10.   </head>
    11.   <body>
    12.     <img src="alienb.jpg" alt="Моё тестовое изображение" id="layer1" />
    13.     <img src="imgs/1.png" alt="Моё тестовое изображение" id="layer2" />
    14.  
    15.     <img src="alienf.png" alt="Моё тестовое изображение" id="layer3"/>
    16. <script type="text/javascript">
    17.  
    18.     function foo(){
    19.         var sh=1;
    20.         var a=a+sh;
    21.         document.getElementById("layer2").style.src="imgs/"+a+".png";
    22.      
    23.     }
    24.     setInterval(foo(), 2000);
    25.   </script> </body>
    26. </html>
     
  2. Norair_986

    Norair_986 Новичок

    С нами с:
    3 фев 2025
    Сообщения:
    7
    Симпатии:
    0
    Там document.getElementById("layer2").src="imgs/"+a+".PNG"
    Но все равно не работает
     
  3. Norair_986

    Norair_986 Новичок

    С нами с:
    3 фев 2025
    Сообщения:
    7
    Симпатии:
    0
    Код (Text):
    1. <!doctype html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8" />
    5.     <title>Моя тестовая страница</title>
    6.     <style>
    7.             #video { z-index: 1; }
    8.             #layer2 { z-index: 20; position:absolute;}
    9.             #layer3 { z-index: 3;position:absolute; }
    10.     </style>
    11.   </head>
    12.   <body><div id="video">
    13. <video width="320" height="240" autoplay loop muted>
    14.   <source src="Alien.mp4" type="video/mp4" />
    15.   Your browser does not support the video tag.
    16. </video></div>  
    17.     <script type="text/javascript">
    18.            
    19.             var a=document.getElementById("video");
    20.             foonction foo(a){
    21.                
    22.                 for(var i=0;i++;i<1080){
    23.                     var b=i+"px";
    24.                     a.style.marginLeft=b;
    25.                 }
    26.            
    27.             }
    28.             foo(a);
    29.  
    30.   </script>
    31. </body>
    32. </html>
    так тоже не фурычет
     
  4. Norair_986

    Norair_986 Новичок

    С нами с:
    3 фев 2025
    Сообщения:
    7
    Симпатии:
    0
    узнал что видео в в режиме проигрывания нельзя перемещать по экрану
    сделал вариант если Магомед не идет то гора придет пишет foo is not defibed в консоли
    пот код
    Код (Text):
    1. <!doctype html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8" />
    5.     <title>Моя тестовая страница</title>
    6.     <style>
    7.             #video { z-index: 4;position:absolute;left:180px;top:310px;}
    8.             #layer2 { z-index: 20; position:absolute;}
    9.             #layer3 { z-index: 3;position:absolute; }
    10.     </style>
    11.   </head>
    12.   <body>
    13.  
    14. <input id="step" value="1"/>
    15.   <div id="fon">
    16.   <img width="320" height="569" src="alienb.jpg"id="layer3">
    17.   <img src="alienf.png" width="320" height="569" id="layer2">
    18.   </div>
    19.      
    20.   <div id="video">
    21. <video width="240" height="180" autoplay loop muted>
    22.   <source src="Alien.webm" type="video/webm" />
    23.   Your browser does not support the video tag.
    24. </video></div>
    25. <script type="text/javascript" >
    26.     function foo(){
    27.         var b  = document.getElementById('step').value;
    28.  
    29.         var d  = document.getElementById("fon");
    30.         b=Number(b);
    31.         console.log("шаг:"b);
    32.         for(var i=0;i++;i<180){
    33.             d.left=d.left-i*b;
    34.             d.top=d.top-i*b;
    35.         }
    36.     }
    37.  
    38.   </script>
    39.  
    40.   <button id="button" onclick="foo()">VVodcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</button>
    41. </body>
    42. </html>