Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Плавное уменьшение размеров картинки

Автор: Gold Dragon 10.8.2004, 08:44

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

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

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

Автор: Sardar 10.8.2004, 13:49

За 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)">

Автор: Gold Dragon 10.8.2004, 14:16

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

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

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

Автор: Sardar 10.8.2004, 22:21

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

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

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

Автор: Gold Dragon 11.8.2004, 07:42

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

Автор: Sardar 11.8.2004, 10:48

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

Автор: Gold Dragon 11.8.2004, 11:13

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

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

Автор: sergejzr 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.

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 изменяет с каждым шагом размер картинки, как только шаги закончились анимация останавливается.
Спасибо:
http://vingrad.ru/@Sardar за предоставленный материал.

Автор: Gold Dragon 1.11.2004, 20:08

Цитата(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.

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

Автор: sergejzr 1.11.2004, 21:36

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

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

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

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