javascript多种动画传参

最新推荐文章于 2023-12-29 11:07:38 发布

sunny_xcy

最新推荐文章于 2023-12-29 11:07:38 发布

阅读量297

点赞数

分类专栏： javascript 文章标签：动画 html javascript

本文链接：https://blog.csdn.net/sunny_xcy/article/details/77478228

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>