Люди, что-то запарился....

Есть картинка, размер X:Y. Нужно чтобы после клика по ней, она плавно уменьшилась в точку. X не равно Y.


ЗЫ
немного опечатался в названии темы

Это сообщение отредактировал(а) Red Dragon - 10.8.2004, 09:42

За 5 минут:

Код

<script language="Javascript" type="text/javascript"> <!-- function resize(img,w,h,step) { dresize.target=img; dresize.width=img.offsetWidth; dresize.xstep=(w-img.offsetWidth)/step; dresize.height=img.offsetHeight; dresize.ystep=(w-img.offsetHeight)/step; dresize.step=step; dresize.timer=window.setInterval(dresize,10); } function dresize() { dresize.target.style.width=Math.round(dresize.width+=dresize.xstep); dresize.target.style.height=Math.round(dresize.height+=dresize.ystep); if(--dresize.step<=0) window.clearInterval(dresize.timer); } //--> </script> ... <img src="test.jpg" onClick="resize(this,1,1,100)">

Sardar
Именно то, что надо.

Если не трудно поясни малость код. Я то с этим ни разу не сталкивался, а начал разбираться - запутался.


ЗЫ
жалко, что нет возможности самому исправлять название темы

Это сообщение отредактировал(а) Red Dragon - 10.8.2004, 14:17

Цитата(Red @ 10.8.2004, 13:16)

и не трудно поясни малость код. Я то с этим ни разу не сталкивался, а начал разбираться - запутался.

Используем style.width, style.height для изменения размеров картинки, window.setInterval для создания анимации и чуток логики.
В resize я сохраняю первоначальный размер картинки(offset(Width|Height)); количество шагов, за которое хотим изменить картинку: step; вычисляю изменение размера за один шаг: xstep, ystep. Далее запускаю анимацию реализованную в функции dresize.
Фунцкия dresize изменяет с каждым шагом размер картинки, как только шаги закончились анимация останавливается.

В принципе это я понял. Едиственное не совсем понимаю как работает вот это
dresize. .....
вызывается функция, но со свойствами. Просто никогда такое не встречал..

Это не свойства функции. Функция это обьект Function и как в любой обьект она может иметь сколько угодно полей, которые ты можешь создать сам. Просто не хотел сорить переменными и сохранил их в функции

Аааа, Семён Семёныч....

Это интересно, попробую использовать сам в будущем.

Question:
Как плавно уменьшить размеры картинки?
How smoothly to reduce the size of a picture or resize?
Wie kann man ein Bild fliessend verkleinern bis es schliesslich verschwindet.

Answer:
Смотри пример:

Браузеры:
Internet Explorer Yes, Mozilla Yes, Opera Yes

Пример:

Код

<!-- Thanks to: Sardar http://vingrad.ru/@Sardar for this excample --> <script language="Javascript" type="text/javascript"> <!-- function resize(img,w,h,step) { dresize.target=img; dresize.width=img.offsetWidth; dresize.xstep=(w-img.offsetWidth)/step; dresize.height=img.offsetHeight; dresize.ystep=(w-img.offsetHeight)/step; dresize.step=step; dresize.timer=window.setInterval(dresize,10); } function dresize() { dresize.target.style.width=Math.round(dresize.width+=dresize.xstep); dresize.target.style.height=Math.round(dresize.height+=dresize.ystep); if(--dresize.step<=0) window.clearInterval(dresize.timer); } //--> </script>     ... <img src="test.jpg" onClick="resize(this,1,1,100)">

Примечания:
Используем style.width, style.height для изменения размеров картинки, window.setInterval для создания анимации .
В resize сохраняется первоначальный размер картинки(offset(Width|Height)); количество шагов, за которое хотим изменить картинку: step;
Фунцкия dresize изменяет с каждым шагом размер картинки, как только шаги закончились анимация останавливается.
Спасибо:
Sardar за предоставленный материал.

Цитата(sergej @ 1.11.2004, 02:10)

Question: Как плавно уменьшить размеры картинки? How smoothly to reduce the size of a picture or resize? Wie kann man ein Bild fliessend verkleinern bis es schliesslich verschwindet.

Твои ответы стали очень понятными и, что самое главное, итоговыми.

Цитата(Red @ 1.11.2004, 19:08)

Твои ответы стали очень понятными

А раньше были непонятными?

Вот почему:
http://forum.vingrad.ru/index.php?showtopic=32780#