记录：变速函数封装之增加任意一个属性-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>王侯将相宁有种乎</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            margin-top: 20px;
            width: 200px;
            height: 100px;
            background-color: green;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<input type="button" value="变高到800px" id="btn1"/>
<input type="button" value="变宽到400px" id="btn2"/>
<div id="dv"> </div>
<script src="common.js"> </script>
<script>
    //获取任何元素的任意一个样式的属性的值
    function getCssStyle(element,attr) {
      return window.getComputedStyle? window.getComputedStyle(element,null)[attr]: element.currentStyle[attr];
        //得到的属性的值是字符串
    }
    //封装的变速函数动画：任意的元素，增加任意一个属性，到任意的一个距离
   function animate(element,attr,target) {
     clearInterval(element.timeId);//清除定时器
     element.timeId=setInterval(function (args) {
       var current=parseInt(getCssStyle(element,attr));//获取当前元素属性的值，并转换成数字
       var step=(target-current)/10;
       step=step>0?Math.ceil(step):Math.floor(step);
       current+=step;
       element.style[attr]=current+"px";
       if(target==current){
         clearInterval(element.timeId);
       }
     },10)
   }
    my$("btn1").οnclick=function () {
      animate(my$("dv"),"height",800)
    };
    my$("btn2").οnclick=function () {
      animate(my$("dv"),"width",400)
    }
</script>
</body>
</html>

转载于:https://my.oschina.net/u/3848851/blog/1813586