DHTML

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

JavaScript


Книги

English | Главная


Полезные ссылки:





Движущиеся объекты | Описание

Для движущихся объектов меняется свойство "top". Работает в Internet Explorer, Netscape Navigator версий 4.x и выше.

Если Вы хотите использовать любой из наших примеров, поставьте на нас ссылку.
Здесь Вы можете взять готовый HTML-код для такой ссылки. 
<html>
<head>
<title>www.redmount.com - DHTML - Движущиеся объекты</title>
<script language=javascript>
<!--
  //global variables
  var layerRef="null",styleSwitch="null";
  function init()
  {
    layerRef="document.all";
    styleSwitch=".style";
    go();    
  }
// -->    
</script>
</head>

<body onload=init() bgcolor="White">
<script language=javascript>

<!--
  function moveLayerTo(coinname,left,top)
  {
    eval(layerRef+'["'+coinname+'"]'+styleSwitch+'.top=top');
    eval(layerRef+'["'+coinname+'"]'+styleSwitch+'.left=left');
  }
  var i1=285,i2=285,i3=285,i4=285,i5=285,j1=100,j2=370,j3=370,j4=370,j5=370,smj=25;

  function go()
  {
    i1=i1;j1=j1;
    j1=j1+smj;
    if(j1>380)
      j1=-380;
    j2=j2+smj;
    if(j2>380)
      j2=-360;
    j3=j3+smj;
    if(j3>380)
      j3=-250;
    j4=j4+smj;
    if(j4>380)
      j4=-150;
    j5=j5+smj;
    if(j5>380)
      j5=-50;
    moveLayerTo("coin1",i1,j1);
    moveLayerTo("coin2",i2,j2);
    moveLayerTo("coin3",i3,j3);
    moveLayerTo("coin4",i4,j4);
    moveLayerTo("coin5",i5,j5);
    setTimeout("go()",eval(50));
  }
// -->
</script>

<style type="text/css">
#coin1 {position: absolute; visibility: visible;  top: 600; left: 50; z-index:   10; width:10}
#coin2 {position: absolute; visibility: visible;  top: 600; left: 100; z-index:  10; width:10}
#coin3 {position: absolute; visibility: visible;  top: 600; left: 100; z-index:  10; width:10}
#coin4 {position: absolute; visibility: visible;  top: 600; left: 100; z-index:  10; width:10}
#coin5 {position: absolute; visibility: visible;  top: 600; left: 100; z-index:  10; width:10}
#pig   {position: absolute; visibility: visible;  top: 280; left: 150; z-index: 100; width:10}
#line  {position: absolute; visibility: visible;  top: 265; left: 280; z-index:   5; width:10}
#text{position: absolute; z-index: 2; visibility: visible; left: 15px; top: 15px;}
</style>

<div id="coin1">
<img src="coin01.gif" border=0>
</div>
<div id="coin2">
<img src="coin02.gif" border=0>
</div>
<div id="coin3">
<img src="coin03.gif" border=0>
</div>
<div id="coin4">
<img src="coin04.gif" border=0>
</div>
<div id="coin5">
<img src="coin05.gif" border=0>
</div>
<div id="pig">
<img src="pig.jpg" border=0>
</div>
<div id="line">
<img src="line.gif" border=0>
</div>

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

</body>
</html>