DHTML

• Движущийся фон
• Движущиеся объекты
• Подсветка кнопок
• Выпадающие меню
• Ожидание загрузки
• Drag'n'Drop
• Титры
• Телетайп
• Попади в меня!
• Анимация
• ActiveX
• Прозрачность
• Эффекты загрузки
• Шлейф
• Шторы

JavaScript


Книги

English | Главная


Полезные ссылки: https://smmwar.com ways to gain real instagram followers.





Анимация | Описание

Смена кадров происходит при использовании функции settimeout, одним из параметров которой является задержка в миллисекундах. Работает в Internet Explorer, Netscape Navigator версий 4.x и выше.

Если Вы хотите использовать любой из наших примеров, поставьте на нас ссылку.
Здесь Вы можете взять готовый HTML-код для такой ссылки. 
<html>
<head>
<title>www.redmount.com - DHTML - Анимация</title>
<script language=javascript>
<!--
  //global variables
  var i1=1, i2=21, i3=41, layerRef="null", styleSwitch="null";
  function init()
  {
    layerRef="document.all";
    styleSwitch=".style";
    start1();    
    start2();
    start3();
  }
// -->    
</script>
</head>
<body onload=init() bgcolor=black text=white>
<script language=javascript>
<!--
    function showLayer(layerName)
    {
     eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
    }
    function hideLayer(layerName)
    {
      eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
    }

    function start1()
    {
      eval('hideLayer("kadr'+i1+'")');
      i1++;
      if(i1>20)
        i1=1;
      eval('showLayer("kadr'+i1+'")');
      setTimeout("start1()",eval(0));
    }
    function start2()
    {
      eval('hideLayer("kadr'+i2+'")');
      i2++;
      if(i2>40)
        i2=21;
      eval('showLayer("kadr'+i2+'")');
      setTimeout("start2()",eval(70));
    }
    function start3()
    {
      eval('hideLayer("kadr'+i3+'")');
      i3++;
      if(i3>60)
        i3=41;
      eval('showLayer("kadr'+i3+'")');
      setTimeout("start3()",eval(200));
    }
// -->
</script>

<style type="text/css">
#text {position: absolute; visibility: visible;  top: 150; left: 15; z-index:  10;}

#kadr1 {position: absolute; visibility: visible;  top: 50; left: 50; z-index:  10; width:100}
#kadr2 {position: absolute; visibility: hidden;  top: 50; left: 50; z-index:  10; width:100}
#kadr3 {position: absolute; visibility: hidden;  top: 50; left: 50; z-index:  10; width:100}
#kadr4 {position: absolute; visibility: hidden;  top: 50; left: 50; z-index:  10; width:100}
#kadr5 {position: absolute; visibility: hidden;  top: 50; left: 50; z-index:  10; width:100}
#kadr6 {position: absolute; visibility: hidden;  top: 50; left: 50; z-index:  10; width:100}
#kadr7 {position: absolute; visibility: hidden;  top: 50; left: 50; z-index:  10; width:100}
#kadr8 {position: absolute; visibility: hidden;  top: 50; left: 50; z-index:  10; width:100}
#kadr9 {position: absolute; visibility: hidden;  top: 50; left: 50; z-index:  10; width:100}
#kadr10 {position: absolute; visibility: hidden;  top: 50; left: 50; z-index:  10; width:100}
#kadr11 {position: absolute; visibility: hidden;  top: 50; left: 50; z-index:  10; width:100}
#kadr12 {position: absolute; visibility: hidden;  top: 50; left: 50; z-index:  10; width:100}
#kadr13 {position: absolute; visibility: hidden;  top: 50; left: 50; z-index:  10; width:100}
#kadr14 {position: absolute; visibility: hidden;  top: 50; left: 50; z-index:  10; width:100}
#kadr15 {position: absolute; visibility: hidden;  top: 50; left: 50; z-index:  10; width:100}
#kadr16 {position: absolute; visibility: hidden;  top: 50; left: 50; z-index:  10; width:100}
#kadr17 {position: absolute; visibility: hidden;  top: 50; left: 50; z-index:  10; width:100}
#kadr18 {position: absolute; visibility: hidden;  top: 50; left: 50; z-index:  10; width:100}
#kadr19 {position: absolute; visibility: hidden;  top: 50; left: 50; z-index:  10; width:100}
#kadr20 {position: absolute; visibility: hidden;  top: 50; left: 50; z-index:  10; width:100}

#kadr21 {position: absolute; visibility: visible;  top: 50; left: 250; z-index:  10; width:100}
#kadr22 {position: absolute; visibility: hidden;  top: 50; left: 250; z-index:  10; width:100}
#kadr23 {position: absolute; visibility: hidden;  top: 50; left: 250; z-index:  10; width:100}
#kadr24 {position: absolute; visibility: hidden;  top: 50; left: 250; z-index:  10; width:100}
#kadr25 {position: absolute; visibility: hidden;  top: 50; left: 250; z-index:  10; width:100}
#kadr26 {position: absolute; visibility: hidden;  top: 50; left: 250; z-index:  10; width:100}
#kadr27 {position: absolute; visibility: hidden;  top: 50; left: 250; z-index:  10; width:100}
#kadr28 {position: absolute; visibility: hidden;  top: 50; left: 250; z-index:  10; width:100}
#kadr29 {position: absolute; visibility: hidden;  top: 50; left: 250; z-index:  10; width:100}
#kadr30 {position: absolute; visibility: hidden;  top: 50; left: 250; z-index:  10; width:100}
#kadr31 {position: absolute; visibility: hidden;  top: 50; left: 250; z-index:  10; width:100}
#kadr32 {position: absolute; visibility: hidden;  top: 50; left: 250; z-index:  10; width:100}
#kadr33 {position: absolute; visibility: hidden;  top: 50; left: 250; z-index:  10; width:100}
#kadr34 {position: absolute; visibility: hidden;  top: 50; left: 250; z-index:  10; width:100}
#kadr35 {position: absolute; visibility: hidden;  top: 50; left: 250; z-index:  10; width:100}
#kadr36 {position: absolute; visibility: hidden;  top: 50; left: 250; z-index:  10; width:100}
#kadr37 {position: absolute; visibility: hidden;  top: 50; left: 250; z-index:  10; width:100}
#kadr38 {position: absolute; visibility: hidden;  top: 50; left: 250; z-index:  10; width:100}
#kadr39 {position: absolute; visibility: hidden;  top: 50; left: 250; z-index:  10; width:100}
#kadr40 {position: absolute; visibility: hidden;  top: 50; left: 250; z-index:  10; width:100}
                                                                  
#kadr41 {position: absolute; visibility: visible;  top: 50; left: 450; z-index:  10; width:100}
#kadr42 {position: absolute; visibility: hidden;  top: 50; left: 450; z-index:  10; width:100}
#kadr43 {position: absolute; visibility: hidden;  top: 50; left: 450; z-index:  10; width:100}
#kadr44 {position: absolute; visibility: hidden;  top: 50; left: 450; z-index:  10; width:100}
#kadr45 {position: absolute; visibility: hidden;  top: 50; left: 450; z-index:  10; width:100}
#kadr46 {position: absolute; visibility: hidden;  top: 50; left: 450; z-index:  10; width:100}
#kadr47 {position: absolute; visibility: hidden;  top: 50; left: 450; z-index:  10; width:100}
#kadr48 {position: absolute; visibility: hidden;  top: 50; left: 450; z-index:  10; width:100}
#kadr49 {position: absolute; visibility: hidden;  top: 50; left: 450; z-index:  10; width:100}
#kadr50 {position: absolute; visibility: hidden;  top: 50; left: 450; z-index:  10; width:100}
#kadr51 {position: absolute; visibility: hidden;  top: 50; left: 450; z-index:  10; width:100}
#kadr52 {position: absolute; visibility: hidden;  top: 50; left: 450; z-index:  10; width:100}
#kadr53 {position: absolute; visibility: hidden;  top: 50; left: 450; z-index:  10; width:100}
#kadr54 {position: absolute; visibility: hidden;  top: 50; left: 450; z-index:  10; width:100}
#kadr55 {position: absolute; visibility: hidden;  top: 50; left: 450; z-index:  10; width:100}
#kadr56 {position: absolute; visibility: hidden;  top: 50; left: 450; z-index:  10; width:100}
#kadr57 {position: absolute; visibility: hidden;  top: 50; left: 450; z-index:  10; width:100}
#kadr58 {position: absolute; visibility: hidden;  top: 50; left: 450; z-index:  10; width:100}
#kadr59 {position: absolute; visibility: hidden;  top: 50; left: 450; z-index:  10; width:100}
#kadr60 {position: absolute; visibility: hidden;  top: 50; left: 450; z-index:  10; width:100}
</style>


<div id="kadr1"><img src="ho01.gif" border=0></div>
<div id="kadr2"><img src="ho02.gif" border=0></div>
<div id="kadr3"><img src="ho03.gif" border=0></div>
<div id="kadr4"><img src="ho04.gif" border=0></div>
<div id="kadr5"><img src="ho05.gif" border=0></div>
<div id="kadr6"><img src="ho06.gif" border=0></div>
<div id="kadr7"><img src="ho07.gif" border=0></div>
<div id="kadr8"><img src="ho08.gif" border=0></div>
<div id="kadr9"><img src="ho09.gif" border=0></div>
<div id="kadr10"><img src="ho10.gif" border=0></div>
<div id="kadr11"><img src="ho11.gif" border=0></div>
<div id="kadr12"><img src="ho12.gif" border=0></div>
<div id="kadr13"><img src="ho13.gif" border=0></div>
<div id="kadr14"><img src="ho14.gif" border=0></div>
<div id="kadr15"><img src="ho15.gif" border=0></div>
<div id="kadr16"><img src="ho16.gif" border=0></div>
<div id="kadr17"><img src="ho17.gif" border=0></div>
<div id="kadr18"><img src="ho18.gif" border=0></div>
<div id="kadr19"><img src="ho19.gif" border=0></div>
<div id="kadr20"><img src="ho20.gif" border=0></div>
<div id="kadr21"><img src="ho01.gif" border=0></div>
<div id="kadr22"><img src="ho02.gif" border=0></div>
<div id="kadr23"><img src="ho03.gif" border=0></div>
<div id="kadr24"><img src="ho04.gif" border=0></div>
<div id="kadr25"><img src="ho05.gif" border=0></div>
<div id="kadr26"><img src="ho06.gif" border=0></div>
<div id="kadr27"><img src="ho07.gif" border=0></div>
<div id="kadr28"><img src="ho08.gif" border=0></div>
<div id="kadr29"><img src="ho09.gif" border=0></div>
<div id="kadr30"><img src="ho10.gif" border=0></div>
<div id="kadr31"><img src="ho11.gif" border=0></div>
<div id="kadr32"><img src="ho12.gif" border=0></div>
<div id="kadr33"><img src="ho13.gif" border=0></div>
<div id="kadr34"><img src="ho14.gif" border=0></div>
<div id="kadr35"><img src="ho15.gif" border=0></div>
<div id="kadr36"><img src="ho16.gif" border=0></div>
<div id="kadr37"><img src="ho17.gif" border=0></div>
<div id="kadr38"><img src="ho18.gif" border=0></div>
<div id="kadr39"><img src="ho19.gif" border=0></div>
<div id="kadr40"><img src="ho20.gif" border=0></div>
<div id="kadr41"><img src="ho01.gif" border=0></div>
<div id="kadr42"><img src="ho02.gif" border=0></div>
<div id="kadr43"><img src="ho03.gif" border=0></div>
<div id="kadr44"><img src="ho04.gif" border=0></div>
<div id="kadr45"><img src="ho05.gif" border=0></div>
<div id="kadr46"><img src="ho06.gif" border=0></div>
<div id="kadr47"><img src="ho07.gif" border=0></div>
<div id="kadr48"><img src="ho08.gif" border=0></div>
<div id="kadr49"><img src="ho09.gif" border=0></div>
<div id="kadr50"><img src="ho10.gif" border=0></div>
<div id="kadr51"><img src="ho11.gif" border=0></div>
<div id="kadr52"><img src="ho12.gif" border=0></div>
<div id="kadr53"><img src="ho13.gif" border=0></div>
<div id="kadr54"><img src="ho14.gif" border=0></div>
<div id="kadr55"><img src="ho15.gif" border=0></div>
<div id="kadr56"><img src="ho16.gif" border=0></div>
<div id="kadr57"><img src="ho17.gif" border=0></div>
<div id="kadr58"><img src="ho18.gif" border=0></div>
<div id="kadr59"><img src="ho19.gif" border=0></div>
<div id="kadr60"><img src="ho20.gif" border=0></div>

<div id="text">Text</div>

</body>
</html>