欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript動畫效果類封裝代碼

 更新時間:2007年08月28日 20:22:10   作者:  
<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>

相關文章

  • three.js中點對象(Point)和點材質(PointsMaterial)的具體使用

    three.js中點對象(Point)和點材質(PointsMaterial)的具體使用

    本文主要介紹了three.js中點對象(Point)和點材質(PointsMaterial)的具體使用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-07-07
  • js常用代碼段收集

    js常用代碼段收集

    以下是平時收集的幾個常用代碼段,大多數是從網上搜集而來。也均為未找到是誰誰原創(chuàng),是否允許轉載等要求, 所以如果看到的朋友發(fā)現(xiàn)其中有些代碼是自己寫的,還請原諒在下轉帖出來。
    2011-10-10
  • JavaScript變量類型以及變量之間的轉換你了解嗎

    JavaScript變量類型以及變量之間的轉換你了解嗎

    這篇文章主要為大家詳細介紹了JavaScript變量類型以及變量之間的轉換,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02
  • 微信JS SDK接入的幾點注意事項(必看篇)

    微信JS SDK接入的幾點注意事項(必看篇)

    下面小編就為大家?guī)硪黄⑿臞S SDK接入的幾點注意事項(必看篇)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-06-06
  • es6學習筆記之Async函數的使用示例

    es6學習筆記之Async函數的使用示例

    async 函數,使得異步操作變得更加方便。它是 Generator 函數的語法糖。下面這篇文章主要給大家介紹了es6學習筆記之Async函數使用的相關資料,文中給出了詳細的示例代碼,需要的朋友們下面來一起看看吧。
    2017-05-05
  • js實現(xiàn)自定義右鍵菜單

    js實現(xiàn)自定義右鍵菜單

    這篇文章主要為大家詳細介紹了js實現(xiàn)自定義右鍵菜單,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-05-05
  • js實現(xiàn)移動端tab切換時下劃線滑動效果

    js實現(xiàn)移動端tab切換時下劃線滑動效果

    這篇文章主要為大家詳細介紹了js實現(xiàn)移動端tab切換時下劃線滑動效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • JavaScript設計模式之代理模式實例分析

    JavaScript設計模式之代理模式實例分析

    這篇文章主要介紹了JavaScript設計模式之代理模式,簡單描述了代理模式的概念、原理并結合實例形式分析了javascript代理模式的相關實現(xiàn)與使用技巧,需要的朋友可以參考下
    2019-01-01
  • 微信JSAPI Ticket接口簽名詳解

    微信JSAPI Ticket接口簽名詳解

    這篇文章主要為大家詳細介紹了微信JSAPI Ticket接口簽名,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • js實現(xiàn)簡單的點名器隨機色實例代碼

    js實現(xiàn)簡單的點名器隨機色實例代碼

    這篇文章主要給大家介紹了關于js實現(xiàn)簡單的點名器隨機色的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-09-09

最新評論