javascript多种动画传参

来源:互联网 发布:c语言阶乘怎么写 编辑:程序博客网 时间:2024/06/06 17:47

html代码:

<div id="oDiv" class="base bgred abc ">abc</div>
 

css样式:

<style type="text/css">    .bgred{background-color:red}    .bggreen{background-color: green}    .base{font-size:12px;border:1px solid blue;height:150px;padding:5px;position: absolute;left:150px;top:150px; }</style>


javascript:

<script type="text/javascript">    function $(id){        return document.getElementById(id)    }  window.onload=function(){    var oDiv=$("oDiv"); /*animate(oDiv,"width",100,200,900,Quad,"px")      animate(oDiv,"top",100,50,900,Quad,"px")      animate(oDiv,"left",100,50,900,Quad,"px")*/      animate(oDiv,{//传参方式升了代码          "width":100,          "top":100,          "left":100      },{          "width":200,          "top":50,          "left":50          },900,Quad,"px"      )  }      //curTime:当前时间,即动画已经进行了多长时间,开始时间为0      //start 开始值      //dur 动画持续多长时间      //alter总的变化量      //fx是那种动画效果      //dw是 单位文字大小有时候em,宽高px      //left 100,增加到150,增加了50      function animate(o,start,alter,dur,fx,dw){          var curTime=0;          var t=setInterval(function(){              if(curTime>=dur) clearInterval(t)              for(var i in start){                  o.style[i]=fx(start[i],alter[i],curTime,dur)+dw              }              curTime+=50          },50)      }  function Linear(start,alter,curTime,dur){//最简单的线性变换,即匀速运动      return start+curTime/dur*alter  }  function Quad(start,alter,curTime,dur){//加速运动      return start+Math.pow(curTime/dur,2)*alter  }</script>