VPF::плавное изменение размеров рисунка

sith

Дата 4.5.2008, 12:09 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 537
Регистрация: 11.2.2007

Репутация: нет
Всего: 1

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

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

Там где ты ставишь глупые смайлики, я вбиваю восклицания знаки!!!

Се ля ви

Дата 4.5.2008, 12:15 (ссылка)

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

Загрузка ...

Java/SOAрхитектор

Профиль
Группа: Модератор
Сообщений: 2016
Регистрация: 5.6.2004
Где: place without tim e and space

Репутация: 5
Всего: 127

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

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

)
(
[_])
проф. блог

Кролики думали, что занимаются любовью, а на самом деле их просто разводили...

sith

Дата 4.5.2008, 12:33 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 537
Регистрация: 11.2.2007

Репутация: нет
Всего: 1

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

Код


<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 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

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

Код


<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>

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