繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript动画效果类封装代码
- Javascript
- 可实现多表单提交的javascript函数
- 比较详细的关于javascript中void(0)的具体含义解释
- 随机显示经典句子或诗歌的javascript脚本
- javascript实现的多条新闻公告系统
- 解析arp病毒背后利用的Javascript技术附解密方法
- 比较详细的javascript对象的property和prototype是什么一种关系
- 访问百度和谷歌网速测试的javascript代码
- javascript 动态改变层的Z-INDEX的代码style.zIndex
- javascript+css实现单击颜色褪去效果
- javascript 表单日期选择效果
- 比较简单的javascript实现input双击后可以编辑
- javascript实现的颜色块滑动的动态效果
- js实现网页检测是否安装了 Flash Player 插件
- javascript 实现父窗口引用弹出窗口的值的脚本
- javascript 实现双击才能打开链接的方法
- 用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
- document.createElement("A")比较不错的属性
- 用javascript实现不按Ctrl实现Multiple Select多选
- JavaScript-世界上误解最深的语言分析
- IE和Mozilla的兼容性汇总event
Javascript 中的 javascript动画效果类封装代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 82 ::
收藏到网摘: n/a
<input id=output3 style="position:absolute;top:300;left:300;"/>
<input id=output1 />
<input id=output2 />
<br/>
<input id=output4 />
<script>
function Animation(target,targetProperty,closure,precision)
{
closure=closure||function(x){return x;};
precision=precision||10;
this.handle;
var beginTime=new Date();
var stopTime=new Date();
this.Begin=function(){
beginTime=new Date();
this.handle=setInterval(
function(){
var now=new Date();
target[targetProperty]=closure(now.getTime()-beginTime.getTime());
},
precision
);
}
this.Continue=function(){
var now=new Date();
beginTime.setTime(now.getTime()-stopTime.getTime()+beginTime.getTime());
this.handle=setInterval(
function(){
var now=new Date();
target[targetProperty]=closure(now.getTime()-beginTime.getTime());
},
precision
);
}
this.Stop=function(duration){
clearInterval(this.handle);
if(duration===undefined)
{
stopTime=new Date();
duration=stopTime.getTime()-beginTime.getTime();
}
else stopTime.setTime(beginTime.getTime()+duration)
target[targetProperty]=closure(duration);
}
}
function StoryBoard(Duration,onfinish,flag)
{
onfinish=onfinish||function(){};
var r=new Array();
r.appendAnimation=function(animation)
{
if(animation instanceof Animation)
this.push(animation);
}
r.removeAnimation=function(animation)
{
for(var i=0;i<r.length;i++)
{
if(r[i]==animation)
{
r.splice(i,1);
break;
}
}
}
r.start=function(){
for(var i=0;i<r.length;i++)
{
r[i].Begin();
}
setTimeout(
function(){
for(var i=0;i<r.length;i++)
{
r[i].Stop(Duration);
}
},
Duration
);
onfinish();
}
return r;
}
//////////////////////////////下面是使用方法////////////////////////////////
function $(id)
{
return document.getElementById(id);
}
var a1=new Animation($("output1"),"value");
var a2=new Animation($("output2"),"width",function(x){return Math.floor(x/10);});
var a3=new Animation($("output3").style,"filter",function(x){return "alpha(opacity="+Math.floor(x/5000*100)+")";});
var a4=new Animation($("output4").style,"width",function(x){return Math.floor(x*x*x/50000/5000)+"px";});
var s=new StoryBoard(5000);
s.appendAnimation(a1);
s.appendAnimation(a2);
s.appendAnimation(a3);
s.appendAnimation(a4);
s.start();
</script>
<pre>
output1是改变value
output1是改变宽度
output3是淡入
output4是带缓动的宽度
</pre>
评论 (0) All
