在Sprite 基础之上创建一个既可以控制移动，也可以动画的对象定义。
2012-07-06 14:00 chris-shao 阅读(136) 评论(0) 编辑 收藏 举报
<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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架