• Страница 1 из 1
  • 1
Форум » uCoz » Другие скрипты для uCoz » плавное появление или изменение прозрачности
плавное появление или изменение прозрачности
Дмитрий Дата: Понедельник, 11.06.2012, 18:40 | Сообщение # 1 | Сообщить о нерабочей теме


Аватар для Дмитрий

Регистрация:03.12.2011
Страна: Российская Федерация
Репутация:  14
Сообщений: 1421
Награды: 4 +
Статус:
плавное появление или изменение прозрачности
Для определения прозрачности в css по логике должно служить свойство opacity (Mozilla, Opera), но разработчики IE как всегда выделились и сделали по другому. К тому же в IE не все объекты можно сделать прозрачными. Ниже приведен пример с контейнером span, который в IE6 прозрачности не получает. Исследовать поведение других тегов в разных версиях "любимого" обозревателя, если честно, нет никакого желания. 

Для установления прозрачности объекта в таблице стилей нужно писать:
Code
opacity: 0.5;
filter: alpha(opacity=50);


Прозрачность нельзя указывать в процентах явно. Она измеряется: для IE - от 1 до 100, для других - от 0 до 1. 

Следующий скрипт осуществляет плавное появление / исчезание (читай плавное изменение прозрачности) объекта:

Code
var t,t2,obj,op;
var cm;  // для отображения процентов

function appear(x)   // x - конечное значение прозрачности
{
  op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
   
  if(op < x) {
   clearTimeout(t2);
   op += 0.05;
   cm.innerHTML = Math.round(op*10)/10*100+'%'; // отображение процентов
   obj.style.opacity = op;
   obj.style.filter='alpha(opacity='+op*100+')';
   t=setTimeout('appear('+x+')',20);
  }
}

function disappear(x) {
  op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
   
  if(op > x) {
   clearTimeout(t);
   op -= 0.05;
   cm.innerHTML = Math.round(op*10)/10*100+'%'; // отображение процентов
   obj.style.opacity = op;
   obj.style.filter='alpha(opacity='+op*100+')';
   t2=setTimeout('disappear('+x+')',20);
  }
}


Используя данные функции можно задать эффект появления / затухания проивольному числу элементов на странице. Для этого нужно установить у требуемых объектов соответствующие обработчики событий. При вызове функций не забываем устанавливать переменную obj, которая указывает у какого объекта будет изменяться прозрачность:

Code
<img src="img/logo.png" width="98" height="130" alt="logo" onmouseover="obj=this; appear(1);" onmouseout="disappear(0.5);">
From Russia With Love!
Форум » uCoz » Другие скрипты для uCoz » плавное появление или изменение прозрачности
  • Страница 1 из 1
  • 1
Поиск: