Делая проект заказчику, я наткнулся на одну проблему. Нужно было преобразовать блоки и ссылки. Наводя курсор на объект, тот должен был плавно менять opacity до 1. Убирая курсор с блока, тот должен был вернуть начальный уровень прозрачности.
Конечно, все это было реализовано, но при помощи JavaScript. И получилось довольно приятно, и я решил показать Вам, как это делается!
Посмотреть пример: opacity-javascript.html
Для начала, содадим HTML код:
<script type="text/javascript" src="js/img-opacity.js"></script>
<div id="block"
onmouseover="Show('block', 1);"
onmouseout="Hide('block', 0.1);"
style="opacity: 0.1; filter: alpha(opacity=10);">
Вот тестовый блок
</div>
Теперь я объясню вам все что там есть.
-
OnMouseOver. Возникает при наведении курсора мыши на элемент. В данном случае, мы включаем функцию Show, заданную в скрипте (об этом позже).
-
OnMouseOut. Возникает при перемещения указателя мыши за границы объекта. Здесь мы включаем функцию Hide. Замедте, мы включаем, а не выключаем Show.
-
('block', 1) и ('block', 0.1). Эти параметры относятся к onmouseover и onmouseout соответственно. 'block' — это ID, который должен обязательно быть указан в div (в данном примере). '1' и '0.1' — это параметр opacity до значения которого будет увеличиваться или уменьшаться прозрачность.
- Style. Здесь мы указываем только прозрачность, а все остальные стили пропишите в #block. Здесь opacity луше указывать такое, какое задано в OnMouseOut.
Теперь разберемся с JavaScript:
var hT, sT;
function Show(objId, x) {
var obj = document.getElementById(objId);
op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
if(op < x) {
clearTimeout(hT);
op += 0.1;
obj.style.opacity = op;
obj.style.filter='alpha(opacity='+op*100+')';
sT=setTimeout('Show(\''+objId+'\', '+x+')',30);
}
}
function Hide(objId, x) {
var obj = document.getElementById(objId);
op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
if(op > x) {
clearTimeout(sT);
op -= 0.1;
obj.style.opacity = op;
obj.style.filter='alpha(opacity='+op*100+')';
hT=setTimeout('Hide(\''+objId+'\', '+x+')',30);
}
}
Чтобы изменить время пояления и исчезания, то исчите строки:
Появление: sT=setTimeout('Show(\''+objId+'\', '+x+')',30);
Исчезание: hT=setTimeout('Hide(\''+objId+'\', '+x+')',30);
И измените последний «30» на сколько хотите. Памятка: скорость измеряется в миллисекундах.
Вот и все. Объект был сделан. Если нужно, то могу объяснить принцип действия скрипта.
Этот скрипт универсален, так как не имеет никаких привязанностей к определенному ID. Так что его можно спокой пользовать и для других случаях. Например для ссылок. Вот код ссылок:
<a id="link"
href=""
onmouseover="Show('link', 1);"
onmouseout="Hide('link', 0.1);"
style="opacity: 0.1; filter: alpha(opacity=10);">123
</a>
Главное помнить, что при смене в объекте ID'a, то его придется сменить еще в двух местах. Об этом я писал...
Постовой: Интересуют автомобили? Автомобильные новости, советы водителя, обсуждение автомобилей и многое другое!
Надо будет попробовать и себя на блоге...
спасибо за статью!
необходимо чтобы блок,
изначально display:none;
плавно появлялся на странице,при вызове функции .
прочитав эту статью,написал так:
var hT;
function Show (objId, hBlock) { // название необхрдимого дива, высота
var obj = document.getElementById (objId);
var n=0;
while (n < hBlock) {
n ++;
clearTimeout (hT);
var stylecss = changeStyle (obj, { «display» : «block», «height» : ''+n+'px', «border» : «none» });
setTimeout (''+stylecss+'',30);
}
return objId ;
}
function changeStyle (obj, props) { for (var i in props) {
obj.style[i] = props[i];
}
}
—
но блок появляется сразу.
плавного эффекта скольжения достичь не уддается.
не подскажите решение вопроса?
амир, для такого пользуют jQuery
. Вот, ты стал началом новой статьи!
Ссылка: plavnoe-izmenenie-vysoty-u-obekta
"4. Style. Здесь мы указываем только прозрачность, а все остальные стили пропишите в #block. "
— а почему так? Получается что значения свойств заданные в таблице стилей JS не видит? Только те что заданы через атрибут style или через сам JS. Это у всех так происходит?
telescope, не совсем понимаю что вы хотите сказать.
уже разобрался — если прозрачность задана через CSS-таблицу, то в obj.style.opacity не будет этого значения.
У меня была задача сделать меню из плавно появляющихся/исчезающих блоков. Использовал Ваш код, но заметил, что если быстро проводить мышью вдоль строки элементов, то элементы не успевают вовремя гаснуть. Решил проблему тем, что заменил
var hT, sT; на var hT={}, sT={}; и везде в коде sT на sT[objId] и hT на hT[objId]
Спасибо : ).
Спасибо автору! Полезная статья, а то так не хочется самому изучать javascript!
В IE8 не работает.
Для работы в IE8 необходимо включить поддержку скриптов. Блокирует их система безопасности.
************
op = (obj.style.opacity)?parseFloat (obj.style.opacity):parseInt (obj.style.filter)/100;
************
Это не будет работать в IE)
А это будет)
************
var ieop = obj.style.filter.match (/alpha\(opacity=(.*)\)/);
if (ieop && ieop.length)
ieop = ieop[1];
else
ieop = 100;
op = (obj.style.opacity)?parseFloat (obj.style.opacity):parseInt (ieop)/100;
************
Спасибо, alex, за дополнение =).