Плавное изменение alpha
Добрый день! Вот есть совсем ламерский вопрос.
Как сделать, чтобы фильтр менял прозрачность изображения не сразу (например, при onmouseover), а плавно, с некоторой задержкой. Т.е., например, навел мышь - и картинка постепенно за 5 секунд стала прозрачной. Спасибо! :) |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function() {
function Animator(node, initialOpacity, speed) {
this.node = node;
this.opacity = this.initialOpacity = initialOpacity;
this.speed = speed;
this.flagIn = false;
}
Animator.prototype = {
bind: function(type, listener) {
if(this.node.addEventListener) this.node.addEventListener(type, listener, false);
//@cc_on this.node.attachEvent('on' + type, listener);
},
process: function(type1, type2) {
var _this = this;
this.bind(type1, function() {
_this.flagIn = true;
_this.fadeIn();
});
this.bind(type2, function() {
_this.flagIn = false;
_this.fadeOut();
});
},
setOpacity: function() {
this.node.style.opacity = this.opacity;
//@cc_on if(@_jscript_version < 5.8) this.node.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (this.opacity * 100) + ')';
},
fadeIn: function() {
var _this = this;
setTimeout(function() {
if(_this.opacity < 1 && _this.flagIn) {
_this.setOpacity(_this.opacity += 0.1);
_this.fadeIn();
}
}, this.speed);
},
fadeOut: function() {
var _this = this;
setTimeout(function() {
if(_this.opacity > _this.initialOpacity) {
_this.setOpacity(_this.opacity -= 0.1);
_this.fadeOut();
}
}, this.speed);
}
};
new Animator(document.getElementById('animated'), 0.2, 50).process('mouseover', 'mouseout');
};
</script>
<style type="text/css">
#animated {
opacity: 0.2;
}
</style>
<!--[if IE]>
<style type="text/css">
#animated {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}
</style>
<![endif]-->
</head>
<body>
<img id="animated" src="" alt="" />
</body>
</html>
|
только этот коду будет действовать исключительно в ИЕ, потому что остальные браузеры не поддерживают фильтра,.. так что надо ставить проверку
|
Приведенный мной код будет работать везде.
|
а точно) сорь незаметил) там же и для других стоит стиль)
|
Отлично, спасибо большое!
|
почему?
А почему скрипт применяется только для одной картинки???
Как сделать чтобы можно было применить такое появление к ряду картинок? |
Очевидно вызывать Animator с id нужной картинки
|
ребята всем привет а у меня ситуация следующая
в движке сайта есть свойство "фотография" а код вызова один.. на странице в итоге если применять скрипт в итоге n-количество фотографий с одним id. ну и работает тогда только скрипт у первой фотографии. нет ли решений каких-то для таких задач или в итоге надо тогда все-таки делать нужное кол-во свойств с соответственно со своми кодами вызова где и будут применяться разные id к картинкам тк здесь например http://www.tigir.com/opacity.htm тоже только по id,здесь тоже http://www.easywebscripts.net/javascript/opacity.php как бы ко всем картинкам применить на странице а у не нужных отменить данную функцию... как-то так... спасибо за помощь |
Идентификатор должен быть уникальным, поэтому и работает только с первым элементом. функция-конструктор Animator принимает ссылку на элемент, полученную неважно каким способом. Получите коллекцию нужных элементом, например, по классу (на форуме есть описание, как это сделать) и выполните new Animator(...) для каждого.
|
| Часовой пояс GMT +3, время: 17:39. |