Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Увеличение изображения (https://javascript.ru/forum/misc/1450-uvelichenie-izobrazheniya.html)

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

Код:
<!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>

Андрей Параничев 21.07.2008 14:17
Попробуйте вот так, передавая элемент по ссылке прямо в функцию, либо через 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>

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

Наверно, как-то не так использую SetTimeOut. ??

Андрей Параничев 21.07.2008 19:28
setTimeout только отсрочивает вызов функции, переданной в первый параметр, она не останавливает выполнение главного потока. Так что вам нужно использовать рекурсивный подход, т.е вызывать в функции саму себя по тайм-ауту. Если вы не знаете, как это сделать, я могу написать пример, но чуть позже.

warobushek 22.07.2008 08:23
2 Андрей Параничев
 
Убрал style - в мозилле тоже заработало. Теперь дело только в том, чтобы сделать функцию рекурсивной.
Спасибо за совет:)

warobushek 22.07.2008 09:19
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>

Андрей Параничев 22.07.2008 14:02
Кстати, вы можете использовать не рекурсивное выполнение функции по setTimeout, а установку её выполнения по интервалу, через функцию setInterval.

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


Часовой пояс GMT +3, время: 07:11.