javascript通用动画函数

来源:互联网 发布:开淘宝网店的流程视频 编辑:程序博客网 时间:2024/06/04 19:36

css样式

<style type="text/css">    .bgred{background-color:red}    .bggreen{background-color: green}    .base{font-size:12px;border:1px solid blue;width: 300px;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,"fontSize",1,10,20,20);      animate(oDiv,"width",-1,200,100,50);     }  function animate(o,attr,add,star,end,t){      //o要进行动画的对象      //attr style属性      //add增量      //star 开始值      //end 结束值      var max=Math.max(star,end);      var min=Math.min(star,end);      var interval=setInterval(function(){          if(add>0){              if(min>=max){clearInterval(interval)}              min+=add;              o.style[attr]=min+"px"          }else{              if(max<=min){clearInterval(interval)}              max+=add;              o.style[attr]=max+"px"          }      },t)  }</script>


html代码:

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


原创粉丝点击