Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.07.2008, 14:07
Аватар для warobushek
Аспирант
Отправить личное сообщение для warobushek Посмотреть профиль Найти все сообщения от warobushek
 
Регистрация: 18.07.2008
Сообщений: 80

Увеличение изображения
Написал функцию линейного увеличения размеров рисунка. Пробую ее на следующем коде. Где-то ошибка, ткните пожалуйста носом.

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=windows-1251" http-equiv="content-type"><title>test script</title>
<script type="text/javascript" language="JavaScript">
<!--
function blank()
{//пустая функция
}//blank

function IncImg(h1,w1,h2,w2,name1)
{
	var v=100;//скорость увеличения в пикселях
	var w=w1,h=h1;//текущие размеры
	var vp;//скорость увеличения в процентах
	if( (v/h1)>(v/w1))
		vp=v/h1;
	else vp=v/w1;
		dh=vp*h1;
	dw=vp*w1;
	dt=1000/v;
	
	for(;h<h2;h+=dh,w+=dw)
	{
	    /*применение текущих размеров*/
    	document.name1.width=w;
	    document.name1.height=h;
	    setTimeout(blank, dt);//задержка
	}

	/*применение конечных размеров*/
	document.name1.width=w2;
	document.name1.height=h2;
}//IncImg
//-->
</script>
</head>

<body>
<img OnClick="IncImg(288,400,757,799,'img00')" alt="02" src="02.gif" name="img00" id="img00" height="288" width="400">
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 21.07.2008, 14:17
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Попробуйте вот так, передавая элемент по ссылке прямо в функцию, либо через getElementById. Работать с элементами, через их имя (name) это как-то не комильфо.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=windows-1251" http-equiv="content-type"><title>test script</title>
<script type="text/javascript" language="JavaScript">
<!--
function blank()
{//пустая функция
}//blank

function IncImg(h1,w1,h2,w2, imgObj)
{
	var v=100;//скорость увеличения в пикселях
	var w=w1,h=h1;//текущие размеры
	var vp;//скорость увеличения в процентах
	if( (v/h1)>(v/w1))
		vp=v/h1;
	else vp=v/w1;
		dh=vp*h1;
	dw=vp*w1;
	dt=1000/v;
	
	for(;h<h2;h+=dh,w+=dw)
	{
	    /*применение текущих размеров*/
    	    imgObj.style.width=w;
	    imgObj.style.height=h;
	    setTimeout(blank, dt);//задержка
	}

	/*применение конечных размеров*/
	imgObj.style.width=w2;
	imgObj.style.height=h2;
}//IncImg
//-->
</script>
</head>

<body>
<img OnClick="IncImg(288,400,757,799,this)" alt="02" src="02.gif" name="img00" id="img00" height="288" width="400">
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 21.07.2008, 15:26
Аватар для warobushek
Аспирант
Отправить личное сообщение для warobushek Посмотреть профиль Найти все сообщения от warobushek
 
Регистрация: 18.07.2008
Сообщений: 80

попробовал
в мозилле не работает вообще. :confused:
в ИЕ работает - но вроде без задержки - т.е. такое чувство, что SetTimeOut вообще не работает. :confused:

Наверно, как-то не так использую SetTimeOut. ??
Ответить с цитированием
  #4 (permalink)  
Старый 21.07.2008, 19:28
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

setTimeout только отсрочивает вызов функции, переданной в первый параметр, она не останавливает выполнение главного потока. Так что вам нужно использовать рекурсивный подход, т.е вызывать в функции саму себя по тайм-ауту. Если вы не знаете, как это сделать, я могу написать пример, но чуть позже.
Ответить с цитированием
  #5 (permalink)  
Старый 22.07.2008, 08:23
Аватар для warobushek
Аспирант
Отправить личное сообщение для warobushek Посмотреть профиль Найти все сообщения от warobushek
 
Регистрация: 18.07.2008
Сообщений: 80

2 Андрей Параничев
Убрал style - в мозилле тоже заработало. Теперь дело только в том, чтобы сделать функцию рекурсивной.
Спасибо за совет
Ответить с цитированием
  #6 (permalink)  
Старый 22.07.2008, 09:19
Аватар для warobushek
Аспирант
Отправить личное сообщение для warobushek Посмотреть профиль Найти все сообщения от warobushek
 
Регистрация: 18.07.2008
Сообщений: 80

2 Андрей Параничев
Переделал с использованием рекурсии. Почему все-равно увеличивает не постепенно? :confused:
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=windows-1251" http-equiv="content-type"><title>test script</title>

<script type="text/javascript" language="JavaScript">
<!--
function yvel(imgObj,w,h,h2,dw,dh,dt)
{
	if(h<h2)
	{
		/*применение текущих размеров*/
		imgObj.width=w;
		imgObj.height=h;
		h+=dh;
		w+=dw;
		setTimeout(yvel(imgObj,w,h,h2,dw,dh,dt), dt);//задержка
	}
	else
		;
}//yvel
	
function IncImg(h1,w1,h2,w2, imgObj)
{
	
	var v=100;//скорость увеличения в пикселях
	var w=w1,h=h1;//текущие размеры
	var vp;//скорость увеличения в процентах
	if( (v/h1)>(v/w1))
		vp=v/h1;
	else 
		vp=v/w1;
	dh=1;//vp*h1;
	dw=1;//vp*w1;
	dt=50;//00/v;

	yvel(imgObj,w,h,h2,dw,dh,dt);
}//IncImg
//-->
</script>
</head>
<body>
<img onclick="IncImg(288,400,575,799,this)" alt="02" src="02.gif" name="img00" id="img00" height="288" width="400">
</body></html>
Ответить с цитированием
  #7 (permalink)  
Старый 22.07.2008, 14:02
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Кстати, вы можете использовать не рекурсивное выполнение функции по setTimeout, а установку её выполнения по интервалу, через функцию setInterval.

Для передачи параметров, в setTimeout вам нужно создать анонимную функцию, а использованная вами конструкция не поддерживается, т.е. setTimeout должен вызываться вот так:
setTimeout(function() { yvel(imgObj,w,h,h2,dw,dh,dt) }, dt);
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать, что бы изображения пропадали. Dronch Элементы интерфейса 7 28.08.2008 21:55
Скрытие/показ изображения по нажатию на ссылку warobushek Events/DOM/Window 2 18.07.2008 15:07
как при добавлении изображения на сервер считывать имя в БД? solomusic Серверные языки и технологии 3 12.06.2008 23:28
Пользовательские изображения CyberSorrow Элементы интерфейса 2 23.03.2008 01:14
Визуальное выделение части изображения Гость Общие вопросы Javascript 0 25.02.2008 19:44