Javascript 创建一个动画元件的代码

var DHTMLSprite =function(params)
{
var width=params.width,
height=params.height,
imagesWidth=params.imagesWidth,
$element=params.$drawTarget.append("<div/>").find(':last'),
elementStyle=$element[0].style,
mathFloor=Math.floor;
$element.css({
position:'absolute',
width:width,
height:height,
backgroundImage:'url('+params.images+')'
});
var that={
draw:function(x,y){
elementStyle.left=x+'px';
elementStyle.top=y+'px';
return this;
},
changeImage:function(index){
index *=width;
var vOffset=-mathFloor(index/imagesWidth)*height;
var hOffset=-index%imagesWidth;
elementStyle.backgroundPosition=hOffset+'px '+vOffset+'px';
return this;
},
show:function(){
elementStyle.display='block';
return this;
},
hide:function(){
elementStyle.display='none';
return this;
},
destory:function(){
$element.remove();
}
}
return that;
}
var img =DHTMLSprite ({width:80,height:80,imagesWidth:330,$drawTarget:$("#group_nav"),images:'http://1812.img.pp.sohu.com.cn/images/2012/7/6/9/26/e33569437_1391c97fcacg213_b.jpg'}).draw(100,100).show();
var index=0;
var timer=function(){
if(index<20)
{
console.warn(index);
img.changeImage(index);
index++;
setTimeout(timer,20);
}else
{
img.hide();
img.destory();
}
}
timer();