ВЕБ-ШКОЛА: Мультимедийные эффекты для MS Internet Explorer 4.0+ (часть 5)

РЕКЛАМА

Разное

Мультимедийные эффекты
для MS Internet Explorer 4.0+
(часть 5)

...
<DIV style="position:absolute; width:350; height:40;
    background-color: black; filter: alpha(opacity=50)"></DIV>

<DIV style="color:white; position:absolute; width:350; height:40;">
  <P style="font-size:14pt; font-weight:bold;
       text-align:right; padding-right:3ex;">
          Это &#150 заголовок</P>
</DIV>

<IMG src="sample.gif">
...

Это – заголовок

Пример сценария, использующего таймер

Статические визуальные эффекты могут "оживляться", используя сценарии, основанные на событиях таймера. Следующий пример показывает применение фильтра Light, параметры которого меняются через 0.1 секунды. В ходе выполнения сценария создается впечатление освещения рисунка прожектором. Применение второго фильтра Alpha (полупрозрачности) придает странице еще более интересное содержание.

ВАКАНСИИ (Компьютеры, Интернет). Подробнее >>

<html>
<head><title>Timer Demo</title></head>

<body bgcolor=#ffffde onload="Init()">
<SCRIPT language="JavaScript">
var angle=0;
var dec=2;
var dir=dec;
//параметры фильтра light
var x;
var y;
var x0=-20;
var y0=-20;
var z0=0;
var r = 255;
var g = 255;
var b = 255;
function GetXY()
{
   var rad = Math.PI*angle/180.0;
   x = oDiv.offsetWidth;
   y = Math.tan(rad)*x;
   if (y>oDiv.offsetHeight){
      y = oDiv.offsetHeight;
      x = y/Math.tan(rad);
   }
}
function Next()
{
  if ((angle+=dir)>=90){
    angle=90;
    dir=-dec;
  }
  if (angle<=0){
    angle=0;
    dir=dec;
  }
  GetXY();
  oDiv.filters.light.clear();
  oDiv.filters.light.addCone(x0,y0,z0,x,y,r,g,b,50,80);
}
function Init(){
   GetXY();
   oDiv.filters[0].addCone(x0,y0,z0,x,y,r,g,b,50,80);
   setInterval("Next()",100);
}
</SCRIPT>
<DIV ID="oDiv" style="position:absolute; background-color:white;
          filter: light() alpha(opacity=40);
          width: 370; height:120;">
<img src=sample.gif >
</DIV>
<br>
<DIV style="width:370; height:120; text-align:center">
<p><font size=+1>
Такую возможность предоставляет<br>
на сегодняшний день пожалуй<br>
лишь один браузер<br>
</font></p>
</DIV>

</body>
</html>

(см. результат). [> далее >]

Каждому сайту - механизм организации собственной ленты новостей бесплатно! Подробнее >>

ПОИСК по сайту: