在Sprite 基础之上创建一个既可以控制移动,也可以动画的对象定义。
2012-07-06 14:00
676 查看
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
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 bouncySprite=function(params){
var x=params.x,
y=params.y,
xDir=params.xDir,
yDir=params.yDir,
maxX=params.maxX,
maxY=params.maxY,
animIndex=0,
that = DHTMLSprite(params);
that.moveAndDraw=function(){
x+=xDir;
y+=yDir;
animIndex+=xDir>0?1:-1;
animIndex %=5;
animIndex+=animIndex<0?5:0;
if((xDir<0&&x<0)||(xDir>0&&x>=maxX))
{
xDir=-xDir;
}
if((yDir<0&&y<0)||(yDir>0&&y>=maxY))
{
yDir=-yDir;
}
that.changeImage(animIndex);
that.draw(x,y);
return that;
}
return that;
}
var img =bouncySprite ({x:0,y:0,xDir:5,yDir:5,maxX:300,maxY:100, 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'}).show();
setInterval(function(){ img.moveAndDraw();},20);
});
</script>
<body>
<div id="group_nav"></div>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
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 bouncySprite=function(params){
var x=params.x,
y=params.y,
xDir=params.xDir,
yDir=params.yDir,
maxX=params.maxX,
maxY=params.maxY,
animIndex=0,
that = DHTMLSprite(params);
that.moveAndDraw=function(){
x+=xDir;
y+=yDir;
animIndex+=xDir>0?1:-1;
animIndex %=5;
animIndex+=animIndex<0?5:0;
if((xDir<0&&x<0)||(xDir>0&&x>=maxX))
{
xDir=-xDir;
}
if((yDir<0&&y<0)||(yDir>0&&y>=maxY))
{
yDir=-yDir;
}
that.changeImage(animIndex);
that.draw(x,y);
return that;
}
return that;
}
var img =bouncySprite ({x:0,y:0,xDir:5,yDir:5,maxX:300,maxY:100, 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'}).show();
setInterval(function(){ img.moveAndDraw();},20);
});
</script>
<body>
<div id="group_nav"></div>
</body>
</html>
相关文章推荐
- Factory 定义一个接口,客户可以使用这个接口创建一个对象.同时,我们还可以控制对那个类进行实例化
- 【OC复合题】之定义一个学生类,需要有姓名,年龄,考试成绩三个成员属性,创建5个对象,属性可以任意值。(Objective-C)
- 继承与合成基本概念 继承:可以基于已经存在的类构造一个新类。继承已经存在的类就可以复用这些类的方法和域。在此基础上,可以添加新的方法和域,从而扩充了类的功能。 合成:在新类里创建原有的对象称为合成。
- 定义一个定义完整的类(是可以当作独立的产品发布,成为众多项目中的“基础工程”)。扩展+、-、*、/运算符的功能,使之能与double型数据进行运算。设Complex c; double d; c+d和
- 在同一个schema不可以创建同名称的对象(索引、表、约束等) 但在不同一个schema下可以创建同名称的对象
- 定义一个类只能创建一个对象
- 如何定义一个只能在堆(栈)上创建对象的类
- Python----一个对象的属性可以是另外一个类型创建的对象
- 一个java3d程序,作为熟悉3d技术的基础(可以使用鼠标对场景内的3d对象进行操作)
- 如何定义一个只能在堆(栈)上创建对象的类
- .Net开发笔记(十九) 创建一个可以可视化设计的对象
- 定义一个日期Date,该类对象存放一个日期,可以提供的操作有:void :printDate(); //显示日期,格式如“日期是:2010年6月8日”void
- 一个servlet可以创建一个或者多个实例对象吗?
- "esri/dijit/PopupMobile"这个应该可以在项目中创建一个可移动的窗体
- java 和 JavaScript都可以在创建一个对象时,就可以通过这个对象调用相应方法
- .Net开发笔记(十九) 创建一个可以可视化设计的对象
- 6.5 定义一个日期类 Date,该类对象存放一个日期,可以提供的操作有: void GetDate(); //取日期值,格式如“2001 年 2 月 5 日” void GetYear(); //取
- 一个用于多种数据库连接,并且可以反射出自定义类型对象的DBHelper
- java 的单态模式(只可以创建一个对象)
- Ajax基础知识整理---创建一个XMLHttpRequest对象