Traffic Animation Using JS

/**

 * This framework provide simple traffic animation using

 * javascript style programming.

 * 

 * @author  : irfanudin ridho

 * @email   : irfan.ub@gmail.com

 * @date    : January 2, 2011

 * @version : 1.0

 */

<h1>Traffic Animation</h1>
<div id='satu'></div>


<script>

function TA(w,h){
    this.ta = document.createElement('div');
    this.ta.setAttribute('style','width:'+w+'; height:'+h+'; 

     padding: 2px; border:1px solid #aaa; position:relative;

     margin:0 auto;overflow: hidden;');
}

TA.prototype.create = function(){
    return this.ta;
};

TA.prototype.setMobil = function(lol){
    this.ta.appendChild(lol);
};

function Mobil(c,w,h){
    this.ta = document.createElement('div');
    this.ta.setAttribute('style','width:'+w+'; height: '+h+';

      background: '+c+'; position: relative; margin: 2px; ');
    this.i = 0;
}

Mobil.prototype.create = function(){
    return this.ta;
};

Mobil.prototype.run = function(s){
    this.ta.style.left = this.i;
    this.i = this.i + 1;
    var lol =  this;
    setTimeout(function(){lol.run(s);},1000/s);
};

var satu = document.getElementById('satu');
var lol = new TA('80%');
var a = new Mobil('red',30,10);
var b = new Mobil('blue',20,10);
var c = new Mobil('green',25,10);
var d = new Mobil('brown',25,10);
a.run(50);
b.run(70);
c.run(260);
d.run(40);                                                                        
lol.setMobil(a.create());
lol.setMobil(b.create());
lol.setMobil(c.create());
lol.setMobil(d.create());
satu.appendChild(lol.create());

</script>