javascript动画效果类封装代码


Posted in Javascript onAugust 28, 2007

<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>

Javascript 相关文章推荐
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
js字符串操作方法实例分析
May 06 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
Google韩国首页图标动画效果
Aug 26 #Javascript
javascript在一段文字中的光标处插入其他文字
Aug 26 #Javascript
有一段有意思的代码-javascript现实多行信息
Aug 26 #Javascript
LBS blog sql注射漏洞[All version]-官方已有补丁
Aug 26 #Javascript
javascript下操作css的float属性的特殊写法
Aug 22 #Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 #Javascript
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 #Javascript
You might like
简单的页面缓冲技术
2006/10/09 PHP
PHP Stream_*系列函数
2010/08/01 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
PHP实现的简单缓存类
2015/07/29 PHP
关于js类的定义
2011/06/28 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
HTTP状态码详解
2021/03/18 杂记
英国床垫在线:Mattress Online
2016/12/07 全球购物
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
行政助理的职责
2013/11/14 职场文书
上课不认真检讨书
2014/09/17 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
Redis批量生成数据的实现
2022/06/05 Redis