Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.06.2008, 13:37
Аватар для Макс
Аспирант
Отправить личное сообщение для Макс Посмотреть профиль Найти все сообщения от Макс
 
Регистрация: 13.06.2008
Сообщений: 48

Динамическое изменение размеров изображения
Здравствуйте!
Моя задача создать эффект, который позволил бы при наведении на любую картинку, увеличивать ее до определенных размеров, и возвращать обратно.
Тем самым показать динамическое изменение картинки пользователю.
(P.S. создаю чисто для визуального эффекта, применять можно в фото галереях).

Вот код:
<html>
       <head>
         <style>
	.image {
		width:100px;
		height:100px;
		cursor:pointer;
		position:absolute;
	}
          </style>
          <script>
	function expand(elem) {
		var imH = elem.offsetHeight;
		var imW = elem.offsetWidth;
		var posLeft = elem.offsetLeft;
		var posTop = elem.offsetTop;
		    posLeft--;
		    posTop--;
		    imH++;
		    imW++;
			if(imW <= 120) {
				elem.style.left = posLeft;
				elem.style.top = posTop;
		      		elem.style.width = imW + 1;
		      		elem.style.height = imH + 1;
		     	 timerID = setTimeout("expand()", 10);
			}
	}
	function revert(elem) {
		var imW = elem.offsetWidth;
		var imH = elem.offsetHeight;
		var posLeft = elem.offsetLeft;
		var posTop = elem.offsetTop;
		      posLeft++;
		      posTop++;
		      imW--;
		      imH--;
			elem.style.left = posLeft;
			elem.style.top = posTop;
		      	elem.style.width = imW - 1;
		      	elem.style.height = imH - 1;
				if(imW <= 102) {
					return false
				}
		     	timerID = setTimeout("revert()", 20);
	}
          </script>
       </head>
       <body>
	<img src="forScale.jpg" class="image" id="img1" onmouseover="expand(this)" onmouseout="revert(this)">
       </body>
</html>


Вопрос:
Подскажите, почему когда я передаю функциям параметр "elem" как аргумент ("revert(elem) & expand(elem)", а затем onmouseover="revert(this)" onmouseout="expand(this)"), то после "первого круга" выполнения этих ф-ций, у меня в фаербаге выдает ошибку "elem has no properties", и изменение прекращается.

Объясните пожалуйста почему так происходит, и, если это возможно,
подскажите как это исправить.

Заранее благодарен.
Ответить с цитированием
  #2 (permalink)  
Старый 28.06.2008, 13:46
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Задавайте новые вопросы в новых темах, пожалуйста.
Попробуйте в вызовах таймера поставить так:
timerID = setTimeout(function(){expand(elem)}, 10);
timerID = setTimeout(function(){revert(elem)}, 20);


У вас не передавался элемент, при вызове по тайм-ауту.

Последний раз редактировалось Андрей Параничев, 28.06.2008 в 13:52.
Ответить с цитированием
  #3 (permalink)  
Старый 28.06.2008, 15:02
Аватар для Макс
Аспирант
Отправить личное сообщение для Макс Посмотреть профиль Найти все сообщения от Макс
 
Регистрация: 13.06.2008
Сообщений: 48

Спасибо Андрей, т.е. таким вот методом timerID = setTimeout(function(){expand(elem)}, 10) надо пользоваться когда передаешь функции параметр как аргумент да?
Ответить с цитированием
  #4 (permalink)  
Старый 28.06.2008, 15:13
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Макс,
Да. Может можно еще как-то, но я обычно пользуюсь таким способом.
Ответить с цитированием
  #5 (permalink)  
Старый 28.06.2008, 17:21
Аватар для Макс
Аспирант
Отправить личное сообщение для Макс Посмотреть профиль Найти все сообщения от Макс
 
Регистрация: 13.06.2008
Сообщений: 48

Андрей, Вы бы не могли мне подсказать как мне быть с "глюками" картинок(не с теми глюками которыми Вы подумали ).
Просмотрите архив и быстро пробегите по изображениям. Т.е. когда я быстро "пробегаю" курсором миши по изображениям, то они бывают дрожат, ну а потом все восстанавливаются. Я предполагаю что это потому что условие, в функции которая увеличивает изображения(expand()), по смыслу такое же как и в ф-ции которая сжимает их(). И поэтому пока не выполнится expand() не начнется revert(). Может Вы подскажите в каком направлении мне думать чтоб этого избежать ?

И еще, если у Вас есть ИЕ6, то там, при увеличении картинок, они слегка тормозят. От чего это зависит? От браузера?
Вложения:
Тип файла: zip Galary.zip (769 байт, 14 просмотров)
Ответить с цитированием
  #6 (permalink)  
Старый 21.07.2008, 11:36
Аватар для Макс
Аспирант
Отправить личное сообщение для Макс Посмотреть профиль Найти все сообщения от Макс
 
Регистрация: 13.06.2008
Сообщений: 48

Изменение размера элемента DIV
Подскажите пожалуйста новичку!
Вот код:
<html>
	<head>
	<style>	
	#outer {
		position:absolute;
		width:50%;
		height:325px;
		background-color:lightsteelblue;
		display:block;
		overflow:hidden;
	}
	</style>
	<script>
	function minimaize() {
		var relative = document.getElementById("outer");
		var sizeHeight = relative.offsetHeight;
		if(sizeHeight >= 25) {
			sizeHeight--;
			relative.style.height = sizeHeight - 9
		}
		timerID = setTimeout(function() {minimaize()}, 1);
	}
	function maximaize() {
		var relative = document.getElementById("outer");
		var sizeHeight = relative.offsetHeight;
		if(sizeHeight <=300) {
			sizeHeight++;
			relative.style.height = sizeHeight + 9
		}
		timerID = setTimeout(function() {minimaize()}, 1);
	}
	function change(obj) {
	          if(document.getElementById("outer").style.height >= 25) {
		obj.addEventListener("click", minimaize, false)
	          } else {
		obj.addEventListener("click", maximaize, false)
	          }
	}
	</script>
	</head>
	<body>
	<button onclick="change()">Show/Hide</button>
		<div id="outer">
		</div>
	</body>
	</html>

Как мне связать две ф-ции вместе, т.е. нажал на кнопку - открылось окно, нажал - закрылось. Но проблема в том что я не изменяю display = "block/none", и не меняю классы, а динамически увеличиваю и уменьшаю высоту элемента DIV, посредством двух функций minimaize() & maximaize(). Я не могу подобрать условие в ф-ции change(). Не хватает у меня винтиков, да и болтиков тоже. Подскажите как одной кнопке, в одном событии можно присвоить две ф-ции, или хотябы распределить их как в ф-ции change(), можно привести другой пример, не обязательно справлять этот, главное чтоб логика была понятна.
Куда и в каком направлении мне двигаться?
Жду Ваших отзывов.

Заранее благодарен!
Ответить с цитированием
  #7 (permalink)  
Старый 21.07.2008, 12:06
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Макс,
Для новых вопросов создавайте, пожалуйста, отдельные темы.
Вы можете воспользоваться статической переменной, чтобы сделать функцию-реле, т.е. функцию в которой чередуется выполнение кода при каждом вызове, вот пример:
function change() {
    var static = arguments.callee;
    
    if(typeof static.state == "undefined")
        static.state = false;
    
    if(!static.state)
    {
        alert(0); // Тут ставите одно событие
        static.state = true;
    } else {
        alert(1); // Тут ставите второе событие
        static.state = false;
    }
}

change()
change()
change()
change()
Ответить с цитированием
  #8 (permalink)  
Старый 21.07.2008, 15:55
Аватар для Макс
Аспирант
Отправить личное сообщение для Макс Посмотреть профиль Найти все сообщения от Макс
 
Регистрация: 13.06.2008
Сообщений: 48

У меня не выходит. При первом нажатии выполняется условие 1, а при последующем, условие 2 просто останавливает условие 1.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение размеров картинки через скрипт SLV Общие вопросы Javascript 4 27.12.2010 10:40
Динамическое изменение <input text> baal1988 Events/DOM/Window 4 24.08.2008 16:17
В IE не работает динамическое изменение colspan, нужна помощь! Extasy Общие вопросы Javascript 8 17.08.2008 10:55
Динамическое изменение границ между столбцами таблицы srgg Элементы интерфейса 3 10.08.2008 13:40
Изменение изображения при наведении на ссылку MDS Общие вопросы Javascript 1 08.08.2008 20:54