Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Анимация на JavaScript (https://javascript.ru/forum/misc/33627-animaciya-na-javascript.html)

Marinos 30.11.2012 09:28
Анимация на JavaScript
 
Вложений: 1
Необходимо сделать цветок, с которого по одному опадают лепестки. Сделал массив меняющихся картинок. А так же простое перемещение картинки с лепестком вниз по координате Y. Но слабо представляю как это объединить в одном файле.
Возможно у кого-то есть другие идеи как это реализовать без использования библиотек?

ksa 30.11.2012 10:00
Цитата:
Сообщение от Marinos
Сделал массив меняющихся картинок. А так же простое перемещение картинки с лепестком вниз по координате Y.
Теперь это нужно применить ко всем лепесткам...

vadim5june 30.11.2012 12:38
примерно так
http://all-html5.narod.ru/4/flower/1.htm
надо дорисовать и доработать

Marinos 30.11.2012 17:19
Большое спасибо.
Есть ли возможность скинуть этот файл отдельно? Когда копирую из браузера почему-то перестает работать.

vadim5june 30.11.2012 17:42 
<!DOCTYPE html>
<meta charset="utf-8">
<title>QQ</title>
<body>
<script>alert(0);
var srs=['center','L1','L2','L3','L8'];
var tps=[0,90,90,70,40];
var lfs=[0,-80,50,90,-150];
var ims=[];
var t0=150;
var l0=250;
for(var i=0;i<srs.length;i++)
{ims[i]=document.createElement('img');
ims[i].style.position='absolute';
ims[i].style.top=(t0+tps[i])+'px';
ims[i].style.left=(l0+lfs[i])+'px';
ims[i].src=srs[i]+'.png';
ims[i].i=i;
ims[i].onmouseover=f2;
document.body.appendChild(ims[i]);
};

function f2(e){
var el=e.target;
if(el.i!==0){var c1=setInterval(function(){el.style.top=el.offsetTop+10+'px';if(el.offsetTop>400)clearInterval(c1)},200)}
};
</script>

там у меня файл прям в папке с рисунками лежит-если делать папку image надо путь исправить
ims[i].src='image/'+srs[i]+'.png';


Часовой пояс GMT +3, время: 15:21.