21.07.2008, 14:07
|
 |
Аспирант
|
|
Регистрация: 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> |
|
|
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>
|
|
21.07.2008, 15:26
|
|
Аспирант
|
|
Регистрация: 18.07.2008
Сообщений: 80
|
|
|
попробовал
в мозилле не работает вообще. :confused:
в ИЕ работает - но вроде без задержки - т.е. такое чувство, что SetTimeOut вообще не работает. :confused:
Наверно, как-то не так использую SetTimeOut. ??
|
|
21.07.2008, 19:28
|
|
|
|
Регистрация: 21.02.2008
Сообщений: 1,250
|
|
|
setTimeout только отсрочивает вызов функции, переданной в первый параметр, она не останавливает выполнение главного потока. Так что вам нужно использовать рекурсивный подход, т.е вызывать в функции саму себя по тайм-ауту. Если вы не знаете, как это сделать, я могу написать пример, но чуть позже.
|
|
22.07.2008, 08:23
|
|
Аспирант
|
|
Регистрация: 18.07.2008
Сообщений: 80
|
|
|
2 Андрей Параничев
Убрал style - в мозилле тоже заработало. Теперь дело только в том, чтобы сделать функцию рекурсивной.
Спасибо за совет  |
|
22.07.2008, 09:19
|
|
Аспирант
|
|
Регистрация: 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> |
|
|
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);
|
|
|
|
