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

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

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

Автор: sith 4.5.2008, 12:09

подскажите пожалуйста... как плавно изменить размеры рисунка... при клике на нем мышки?

Автор: Се ля ви 4.5.2008, 12:15

насколько плавно? Ну напиши алгоритм изменения img.style.width и img.style.height . Если нужно совсем плавно, то можешь с использованием setTimeout или setInterval что-то замутить...

Автор: sith 4.5.2008, 12:33

плавно... эм... идея в том что бы был виден процесс измения в середине интервала размеров... а не только начало и конец... а с таймаутами и интервалами что то не очень получаеться...
... вот мой скрипт... может что то не так сделал

Код


<html>
<head>
<title>Expanding Image Script</title>
 
 
<style type="text/css">
#imageHolder {position:absolute; left:100; top:100; width:500; height:250;
background-color:none;}
</style>
 
<script language="JavaScript">
//dynamic image resizing
img_width = 100; //image starting width and height goes here
img_height = 50;
timer = null;
 
function imageGrow(name) {
    growImg = document.images[name];    
 
   for(var x=0; x<20; x++){
        growImg.width += 10;
        growImg.height += 5;
        timer = setTimeout(400);
    }
}
</script>
 
</head>
 
<body >
 Bla bla
<div id="imageHolder" align="center">
<img src="images/1.jpg" border="0" width="100" height="50" id="imageResize"
     align="center" onclick="imageGrow(this.name)" name="imageResize">
</div>
</body>

Автор: bars80080 4.5.2008, 12:59

совсем не так делал

Код


<html>
<head>
<title>Expanding Image Script</title>
 
 
<style type="text/css">
#imageHolder {position:absolute; left:100; top:100; width:500; height:250;
background-color:none;}
</style>
 
<script language="JavaScript">
//dynamic image resizing
var x1 = 100, y1 = 50, x2 = 200, y2 = 100, dx = 2, dy = 1, x, y; //image starting width and height goes here

//img_height = 50;
//timer = null;
 
function imageGrow(img, s) {
    if(x > x2 || y > y2) return;
    x = x1 + s*dx; y = y1 + s*dy;
    img.style.width = x + 'px'; img.style.height = y + 'px';
    s++;
    setTimeout(function(){imageGrow(img, s);}, 20);   
}
</script>
 
</head>
 
<body >
 Bla bla
<div id="imageHolder" align="center">
<img src="images/1.jpg" border="0" width="100" height="50" id="imageResize"
     align="center" onclick="imageGrow(this, 1)" />
</div>
</body>