MegaWeb.su Главная > Разные скрипты > Плавное изменение прозрачности элемента на javascript

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


16-02-2011, 23:28. Разместил: Admin
Плавное изменение прозрачности элемента на 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 прозрачность

Пользуемся на здоровье.
Вернуться назад