Плавное изменение прозрачности элемента на javascript

Автор: Admin    Категория: Магия ЯваСкрипт / Разные скрипты    Теги:  Прозрачность    Дата: 16-02-2011, 23:28
Плавное изменение прозрачности элемента на javascriptОдно из самых совершенных применений прозрачности. Мягкий переход объекта от полупрозрачного состояния к нормальному через специальную библиотеку opacity.

1. Берём скрипт, называем его opacity.js:

function setElementOpacity(oElem, nOpacity)
{
    var p = getOpacityProperty();
    (setElementOpacity = p=="filter"?new Function('oElem', 'nOpacity', 'nOpacity *= 100;    var oAlpha = oElem.filters["DXImageTransform.Microsoft.alpha"] || oElem.filters.alpha;    if (oAlpha) oAlpha.opacity = nOpacity; else oElem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")";'):p?new Function('oElem', 'nOpacity', 'oElem.style.'+p+' = nOpacity;'):new Function)(oElem, nOpacity);
}
function getOpacityProperty()
{
    var p;
    if (typeof document.body.style.opacity == 'string') p = 'opacity';
    else if (typeof document.body.style.MozOpacity == 'string') p =  'MozOpacity';
    else if (typeof document.body.style.KhtmlOpacity == 'string') p =  'KhtmlOpacity';
    else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)[1]>=5.5) p =  'filter';
    
    return (getOpacityProperty = new Function("return '"+p+"';"))();
}
function fadeOpacity(sElemId, sRuleName, bBackward)
{
    var elem = document.getElementById(sElemId);
    if (!elem || !getOpacityProperty() || !fadeOpacity.aRules[sRuleName]) return;
    
    var rule = fadeOpacity.aRules[sRuleName];
    var nOpacity = rule.nStartOpacity;
    
    if (fadeOpacity.aProc[sElemId]) {clearInterval(fadeOpacity.aProc[sElemId].tId); nOpacity = fadeOpacity.aProc[sElemId].nOpacity;}
    if ((nOpacity==rule.nStartOpacity && bBackward) || (nOpacity==rule.nFinishOpacity && !bBackward)) return;

    fadeOpacity.aProc[sElemId] = {'nOpacity':nOpacity, 'tId':setInterval('fadeOpacity.run("'+sElemId+'")', fadeOpacity.aRules[sRuleName].nDalay), 'sRuleName':sRuleName, 'bBackward':Boolean(bBackward)};
}

fadeOpacity.addRule = function(sRuleName, nStartOpacity, nFinishOpacity, nDalay){fadeOpacity.aRules[sRuleName]={'nStartOpacity':nStartOpacity, 'nFinishOpacity':nFinishOpacity, 'nDalay':(nDalay || 30),'nDSign':(nFinishOpacity-nStartOpacity > 0?1:-1)};};

fadeOpacity.back = function(sElemId){fadeOpacity(sElemId,fadeOpacity.aProc[sElemId].sRuleName,true);};

fadeOpacity.run = function(sElemId)
{
    var proc = fadeOpacity.aProc[sElemId];
    var rule = fadeOpacity.aRules[proc.sRuleName];
    
    proc.nOpacity = Math.round(( proc.nOpacity + .1*rule.nDSign*(proc.bBackward?-1:1) )*10)/10;
    setElementOpacity(document.getElementById(sElemId), proc.nOpacity);
    
    if (proc.nOpacity==rule.nStartOpacity || proc.nOpacity==rule.nFinishOpacity) clearInterval(fadeOpacity.aProc[sElemId].tId);
}
fadeOpacity.aProc = {};
fadeOpacity.aRules = {};


2. Заливаем на сайт, подключаем - вставляем код между <head> и </head>

<script type="text/javascript" src="ваш путь до файла/opacity.js"></script>


3. Определяем правила используя метод fadeOpacity.addRule() - вставляем код между <head> и </head>

<script type="text/javascript">
  fadeOpacity.addRule('WebOst', .3, 1, 30);
</script>


Где: ‘WebOst’, - имя правила, задаётся произвольно;
.3, 1, - начальная и конечная прозрачность, числа в диапазоне от 0.0 до 1.0 ;
30 - задержка в миллисекундах (необязательный аргумент, по умолчанию равен 30).

4. В своей таблице CSS устанавливаем изначальную прозрачность картинок:

.opacity {
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}


5. Теперь вставляем сами картинки:

<img id="img1" class="opacity" onmouseover="fadeOpacity(this.id, 'WebOst')"  onmouseout="fadeOpacity.back(this.id)" src="ваш путь до файла/images.jpg" width="130" height="130" alt="" />
<img id="img2" class="opacity" onmouseover="fadeOpacity(this.id, 'WebOst')"  onmouseout="fadeOpacity.back(this.id)" src="ваш путь до файла/images1.jpg" width="130" height="130" alt="" />
<img id="img3" class="opacity" onmouseover="fadeOpacity(this.id, 'WebOst')"  onmouseout="fadeOpacity.back(this.id)" src="ваш путь до файла/images2.jpg" width="130" height="130" alt="" />
<img id="img4" class="opacity" onmouseover="fadeOpacity(this.id, 'WebOst')"  onmouseout="fadeOpacity.back(this.id)" src="ваш путь до файла/images3.jpg" width="130" height="130" alt="" />


Где: id="img..." - идентификатор картинки, произвольное имя, начинается с буквы!!! и должен быть уникальным!!!;
class="opacity" - ваше правило оформления картинки, в нашем случае начальная прозрачность;
onmouseover="fadeOpacity(this.id, ‘WebOst’)" - для изменения прозрачности от начального значения к конечному при наведении курсора;
onmouseout="fadeOpacity.back(this.id)" - для возврата к начальному значению уровня прозрачности.

Пример готового кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Прозрачность от http://megaweb.su/</title>
<!-- Устанавливаем изначальную прозрачность картинок -->
<style type="text/css">
.opacity {
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}
</style>

<!-- Подключаем библиотеку -->
<script type="text/javascript" src="ваш путь до файла/opacity.js"></script>

<script type="text/javascript">
// Создаем правило изменения прозрачности: задаем имя правила, начальную и конечную прозрачность, а также необязательный параметр задержки влияющий на скорость смены прозрачности
  fadeOpacity.addRule('WebOst', .3, 1, 30);
</script>
</head>
<body>
<img id="img1" class="opacity" onmouseover="fadeOpacity(this.id, 'WebOst')"  onmouseout="fadeOpacity.back(this.id)" src="ваш путь до файла/images.jpg" width="130" height="130" alt="" />
<img id="img2" class="opacity" onmouseover="fadeOpacity(this.id, 'WebOst')"  onmouseout="fadeOpacity.back(this.id)" src="ваш путь до файла/images1.jpg" width="130" height="130" alt="" />
<img id="img3" class="opacity" onmouseover="fadeOpacity(this.id, 'WebOst')"  onmouseout="fadeOpacity.back(this.id)" src="ваш путь до файла/images2.jpg" width="130" height="130" alt="" />
<img id="img4" class="opacity" onmouseover="fadeOpacity(this.id, 'WebOst')"  onmouseout="fadeOpacity.back(this.id)" src="ваш путь до файла/images3.jpg" width="130" height="130" alt="" />
</body>
</html>


Пример работы скрипта: javascript прозрачность

Пользуемся на здоровье.
Версия для печати
  • 100
     Просмотров: 7 583      Комментариев: 1   

Понравилась новость Плавное изменение прозрачности элемента на javascript на MegaWeb.su? Сохрани в закладках или распечатай!


Информация

Внимание!

Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!

Другие новости по теме

Обратите внимание, возможно Вас заинтересуют другие публикации, похожие на Плавное изменение прозрачности элемента на javascript из категории Магия ЯваСкрипт / Разные скрипты

№ 1 Автор: iphone 5 6 сентября 2011 19:39

 Вот такой я - iphone 5

iphone 5
Гости
комментариев
публикаций

Статус:
Right after all, what a terrific internet site and educational posts, I'll upload inbound hyperlink - bookmark this internet web site? Regards, Reader.

  • Нравится
  • 0
    

Информация

Внимание!

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Лента новостей
RSS 2.0

Лента новостей сайта megaweb.su

Блок программ Популярный софт

Коды блока "Популярный софт":

Фиксированный
windows-1251

код блока 1

<script type="text/javascript" src="/softblok/softblok.js" charset="windows-1251"></script>

Резиновый
windows-1251

код блока 2

<script type="text/javascript" src="/softblok/softblok2.js" charset="windows-1251"></script>

Резиновый
UTF-8

код блока 3

<script type="text/javascript" src="/softblok/softblok1.js" charset="utf-8"></script>

Глобус