Есть вот такая вот страничка.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=window-1251" />
<title>Я Мерепещающаяся картинка!</title>
<style>
body{padding:0;margin:0;}
#slidediv1{width:100%;height:100%;position: fixed;}
.tdiv{position: fixed; width:300px; height:30px; background: rgba(0, 0, 0, 0.8); top:0; left:20px; color:#f99206;padding:5px;}
.bdiv{position: fixed; width:300px; height:30px; background: rgba(0, 0, 0, 0.8); bottom:0; right:20px; color:#f1f1f1;padding:5px;}
.newsdiv{position: absolute; width:300px; height:300px; background: rgba(0, 0, 0, 0.8);; color:#f1f1f1;padding:5px; border-radius:10px 10px 10px 10px; border: 2px dashed #fff;margin:50px !important; padding: 5px;}
#firstdiv{position: relative;}
</style>
</head>
<body >
<div id="slidediv1"><img src="https://pp.vk.me/c307514/v307514138/a569/7mb8m9F-JFQ.jpg" height="100%" width="100%"/></div>
<div class="tdiv"><div align="center"><b>Картинка:</b> Небеса</div></div>
<div class="bdiv"><div id="stop" style="float:left" onclick="sa();">Стоп</div><div id="down" onclick="fly();" style="float:left">Вниз</div><div id="scrolldown" style="float:left">Прокрутить Вниз</div></div>
<div id="firstdiv">
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div>
<div class="newsdiv">Текст</div></div>
<script>
function afun(divname,divarwidth){
document.getElementById('down').onclick=function(){fly();}
document.getElementById('stop').onclick=function(){sa();}
function sa(){clearInterval(s);}
var position='';
var z=0;
var l=0;
var i=1;
var e=document.getElementById(divname);
var num=e.children.length;
function fly(){
z=0;
w=0;
while(i<num){
e.children[i].style.top=i*divarwidth+'px';
e.children[i].style.left=screen.height/2+'px';i++;}
clearInterval(s);
function aniwidth(){
i=0;
w++;
while(i<num){z++;
e.children[i].style.width=300+w+'px';
i++;}
if(z<num*screen.width/4){setTimeout(function(){aniwidth()},2);}
}
aniwidth();
}
if(screen.height>=720){
var topposition=[Math.floor(Math.random()*screen.height/6-100) , screen.height/2-100+Math.floor(Math.random()*80)];
while(i<num){
position+=(i*300+Math.floor(Math.random()*50))+Math.floor(Math.random()*screen.width/10);
position+='^';
i++;
}i=0;
positionarry=position.split('^');
while(i<num){
if(z==0){z=1;}else{z=0;}
e.children[i].style.top=topposition[z]+50+'px';
e.children[i].style.left=positionarry[i]+'px';i++;
}
function animate(){
l++;
while(i<num){
e.children[i].style.left=positionarry[i]-l+'px';i++;
}
i=0;
}}
else{flydown()}
var s=setInterval(function(){animate();},50);
}
afun('firstdiv',305);
</script>
</body>
</html>
Она содержит анимацию элементов. Потыкайте по словечкам снизу справа поймёте. Казалось бы всё работает. Но есть одно но. Когда элементы выстраиваются вниз в ряд то чуть накладываются друг на друга. Как такого избежать не знаю. Есть идея переделать весь скрипт и сделать так чтоб они выстраивались не из за того что я им задаю положение при помощи left и top а из за float width и position statik ТАк сказать чтоб они отталкивались друг от друга при помощи margin . . . Что за ересь я несу . . . Короче суть в том что мне самому похоже не так просто будет сделать так чтоб они частично не зализали друг на друга. По этому и прощу помощи у здешних гуру. . Помогите
