Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.10.2008, 21:50
Новичок на форуме
Отправить личное сообщение для Vladislav0 Посмотреть профиль Найти все сообщения от Vladislav0
 
Регистрация: 10.10.2008
Сообщений: 2

Плавное изменение alpha
Добрый день! Вот есть совсем ламерский вопрос.
Как сделать, чтобы фильтр менял прозрачность изображения не сразу (например, при onmouseover), а плавно, с некоторой задержкой. Т.е., например, навел мышь - и картинка постепенно за 5 секунд стала прозрачной.
Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 10.10.2008, 23:41
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

<!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>
Ответить с цитированием
  #3 (permalink)  
Старый 11.10.2008, 18:41
Кандидат Javascript-наук
Отправить личное сообщение для magistr_bender Посмотреть профиль Найти все сообщения от magistr_bender
 
Регистрация: 07.09.2008
Сообщений: 133

только этот коду будет действовать исключительно в ИЕ, потому что остальные браузеры не поддерживают фильтра,.. так что надо ставить проверку
Ответить с цитированием
  #4 (permalink)  
Старый 11.10.2008, 19:23
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Приведенный мной код будет работать везде.
Ответить с цитированием
  #5 (permalink)  
Старый 12.10.2008, 00:13
Кандидат Javascript-наук
Отправить личное сообщение для magistr_bender Посмотреть профиль Найти все сообщения от magistr_bender
 
Регистрация: 07.09.2008
Сообщений: 133

а точно) сорь незаметил) там же и для других стоит стиль)
Ответить с цитированием
  #6 (permalink)  
Старый 15.10.2008, 20:34
Новичок на форуме
Отправить личное сообщение для Vladislav0 Посмотреть профиль Найти все сообщения от Vladislav0
 
Регистрация: 10.10.2008
Сообщений: 2

Отлично, спасибо большое!
Ответить с цитированием
  #7 (permalink)  
Старый 12.11.2008, 17:36
St.Angel
 
Сообщений: n/a

почему?
А почему скрипт применяется только для одной картинки???
Как сделать чтобы можно было применить такое появление к ряду картинок?
Ответить с цитированием
  #8 (permalink)  
Старый 16.11.2008, 03:13
...
Отправить личное сообщение для Zibba Посмотреть профиль Найти все сообщения от Zibba
 
Регистрация: 13.10.2008
Сообщений: 225

Очевидно вызывать Animator с id нужной картинки
Ответить с цитированием
  #9 (permalink)  
Старый 21.11.2008, 05:50
Аспирант
Отправить личное сообщение для namez Посмотреть профиль Найти все сообщения от namez
 
Регистрация: 21.11.2008
Сообщений: 52

ребята всем привет а у меня ситуация следующая

в движке сайта есть свойство "фотография"

а код вызова один..

на странице в итоге если применять скрипт в итоге n-количество фотографий с одним id. ну и работает тогда только скрипт у первой фотографии.


нет ли решений каких-то для таких задач или в итоге надо тогда все-таки делать нужное кол-во свойств с соответственно со своми кодами вызова где и будут применяться разные id к картинкам

тк здесь например http://www.tigir.com/opacity.htm
тоже только по id,здесь тоже
http://www.easywebscripts.net/javascript/opacity.php

как бы ко всем картинкам применить на странице а у не нужных
отменить данную функцию...
как-то так...


спасибо за помощь
Ответить с цитированием
  #10 (permalink)  
Старый 21.11.2008, 14:59
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Идентификатор должен быть уникальным, поэтому и работает только с первым элементом. функция-конструктор Animator принимает ссылку на элемент, полученную неважно каким способом. Получите коллекцию нужных элементом, например, по классу (на форуме есть описание, как это сделать) и выполните new Animator(...) для каждого.

Последний раз редактировалось Octane, 22.11.2008 в 00:41.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменение переменной Ilja_ORDY Общие вопросы Javascript 3 09.09.2008 18:56
Динамическое изменение <input text> baal1988 Events/DOM/Window 4 24.08.2008 17:17
Изменение изображения при наведении на ссылку MDS Общие вопросы Javascript 1 08.08.2008 21:54
Динамическое изменение размеров изображения Макс Элементы интерфейса 7 21.07.2008 16:55
Изменение ширины полосы прокрутки Devoto Общие вопросы Javascript 3 07.07.2008 17:01