Плавное изменение прозрачности элемента на 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 прозрачность
Пользуемся на здоровье.
Понравилась новость Плавное изменение прозрачности элемента на javascript на MegaWeb.su? Сохрани в закладках или распечатай!
Информация
Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!
Другие новости по теме
Обратите внимание, возможно Вас заинтересуют другие публикации, похожие на Плавное изменение прозрачности элемента на javascript из категории Магия ЯваСкрипт / Разные скрипты
- Меню навигации ⋙ CSS3 горизонтальное выпадающее меню в стиле web 2.0
- Основы / Шаблоны ⋙ Стильный правильный PHP редирект с таймером обратного отсчёта
- Меню навигации ⋙ Универсальное CSS3 меню одна кнопка замечательный пример CSS3 анимации
- Основы / HTML ⋙ Мини Курс Основы HTML Часть 2
- Основы / CSS ⋙ Обзор основных CSS3 свойств Меню аккордеон на CSS3 вертикальное
- Магия ЯваСкрипт / jQuery ⋙ Плавное изменение прозрачности любого элемента на jQuery
- Магия ЯваСкрипт / jQuery ⋙ Tooltip для увеличения картинки на jQuery
- Магия ЯваСкрипт / jQuery ⋙ Кнопка Выключить свет на jQuery для онлайн кинотеатров
- Основы / XHTML ⋙ XHTML основы Основное различие между HTML и XHTML
- Магия ЯваСкрипт / Разные скрипты ⋙ Tooltip всплывающая подсказка
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
