VPF::Плавное уменьшение размеров картинки

sergejzr

Дата 8.11.2004, 18:51 (ссылка)

(нет голосов)

Загрузка ...

Un salsero
Group Icon

Профиль
Группа: Админ
Сообщений: 13285
Регистрация: 10.2.2004
Где: Германия г .Ганновер

Репутация: 10
Всего: 360

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 за предоставленный материал.

--------------------

Me.
FB.
LinkedIn.
ORCID.
YT.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »