ясно, сейчас с сервера сделаю ифрейм, просто том оно всё соединено с графикой, другими файлами, и надо много выкладывать, но я выкладу сам пример и сам код анимации и остановки(проверьте спокойно в хроме, а потом попробуйте в других браузерах при нагрузке процессора, короче нагрузите как-то фоново процессор)
от я сделал без всяких проверок вытянул кусок приложения(лучше открывайте в новом окне)):
<iframe src='http://75.126.94.196/~oldslots/VK/forForumJavascript.ru.php' width='700px' height='500px'></iframe>
<a href='http://75.126.94.196/~oldslots/VK/forForumJavascript.ru.php' target="_blank">затухающая анимация</a>
от у меня объект Слоты(этот барабан)
toSlots = {
stops:{
1:false, //это номер линии барабана, если будет 1 тогда рекурсия не выполняется
2:false,
3:false
},
start: function(jk,s,sp){ //от запуск, сразу изменяюсь за всякие переменные, ну короче seek это количество пикселей на сколько падает за один шаг элемент, а спид частота рекурсии, и это тоже объекты, только они не тут объявлены
akey[jk]==0
seek[jk]=s;
speed[jk]=sp;
toSlots.stops[jk]=false;
for(ou=1,oi=-140;ou<9;ou++,oi+=35){
document.getElementById('cm'+jk+''+ou).style.top=oi+'px';
document.getElementById('cm'+jk+''+ou).src='data/CM'+ou+'.png'; //каждая картинка что крутиться имеет адрес типа data/CM1.png, data/CM2.png, всего 9 их
}
rec[jk] = function(j){
tm[j] = setTimeout(function() {
if(toSlots.stops[j]){
}else{
for(by[j]=1;by[j]<9;by[j]++){
ih[j]=Number(document.getElementById('cm'+j+''+by[j]).style.top.slice(0,(document.getElementById('cm'+j+''+by[j]).style.top.length-2))); //да и я знаю парсеИнт тут надо, а не это хрень что я написал , но сейчас это роли не играет
if(ih[j]>104){icm[j]=-170+(ih[j]-105); }else{icm[j]=Number(seek[j])+ih[j];}
document.getElementById('cm'+j+''+by[j]).style.top=icm[j].toString()+'px';}
setTimeout(arguments.callee, speed[j]);}
}, speed[j]);
}
rec[jk](jk);
},
stop: function(n,wc1,wc2,wc3){ //от остановка, функция запускается когда приходит результат с сервера, он парситься и вызывается, и вызываются 3 функции через пол секунды, wc = первая картинка что выпадет и wc2,wc3 тоже)
setTimeout(function(){
if(seek[n]>1){
seek[n]=Number(seek[n])-1;
setTimeout(arguments.callee, 500); //сначала уменьшаю чтобы добавляло по 1 пикселю, кстати когда запускается старт он запускается с параметрами (n,4,4), скорость как тут видно 4 и seek;
}else{
setTimeout(function(){
if(speed[n]<20){
speed[n]=Number(speed[n])+8;
setTimeout(arguments.callee, 500); //теперь повышаем интервал
}else{
for(bf[n]=1;bf[n]<9;bf[n]++){
ik[n]=Number(document.getElementById('cm'+n+''+bf[n]).style.top.slice(0,(document.getElementById('cm'+n+''+bf[n]).style.top.length-2)));
if((ik[n]>-36)&&(ik[n]<0)){
//тут проверяется какая картинка находиться ближе всего к 0 координате, то есть к верху, и потом просчитываться сколько ей надо времени чтобы полностью опуститься до 0, и потом моя комбинации что сигали ставятся в следущии 3, и потом ещё прокручую на 3 картинки(1 картинка = 30 пикселей+5 отступление и их 3 должно прокрутить 105, но пишу 110, чтобы не было под полный ноль)
setTimeout(function(){
sE=Number(bf[n]);
if((sE-1)==0){ub1=8}else{ub1=sE-1};
if((ub1-1)==0){ub2=8}else{ub2=ub1-1};
if((ub2-1)==0){ub3=8}else{ub3=ub2-1};
document.getElementById('cm'+n+''+ub1).src='data/CM'+wc3+'.png';
document.getElementById('cm'+n+''+ub2).src='data/CM'+wc2+'.png';
document.getElementById('cm'+n+''+ub3).src='data/CM'+wc1+'.png';
setTimeout(function(){toSlots.stops[n]=true},110*speed[n]);},(Number(ik[n])*-1*speed[n]))
break;}
}
}
},500)
}
},1000);
}
}
я конечно подозреваю что это скорее всего полный МУДАК КОД, но всё таки посмотрите)(у меня всё таки за спиной одна только книга Флэнагана, и я её дочитал только 3 месяца назад, так что.....
... ну короче можете как обычно строго обсырать, но помогите, просто я думаю переделывать полностью, или поискать что можно изменить чтобы всё было корректно)