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

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

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

Автор: sergej.z 8.11.2004, 18:51

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