封装运动框架基本函数（单个属性） 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        #demo{
            width:100px;
            height:100px;
            background-color: pink;
            border:1px solid black;
            position:absolute;
            top:50px;
            left:100px;
            opacity:0.4;
        }
    </style>
</head>
<body>
<button id="btn1">宽度改为300</button>
<button id="btn2">高度改为400</button>
<button id="btn3">背景颜色改为绿色</button>
<button id="btn4">边框改为5px</button>
<button id="btn5">top改为200</button>
<button id="btn6">left改为400</button>
<div id="demo"></div>
</body>
</html>
<script>
    function $id(id){return document.getElementById(id);}
    var demo=$id("demo");
    var btn1=$id("btn1");
    var btn2=$id("btn2");
    // var btn3=$id("btn3");
    // var btn4=$id("btn4");
    var btn5=$id("btn5");
    var btn6=$id("btn6");
    var timer=null;

    btn1.onclick=function () {
            run(demo,"width",300);
    }
    btn2.onclick=function () {
            run(demo,"height",400);
    }
    // btn3.onclick=function () {
    //         run(demo,"backgroundColor","green");
    //  }
    //  btn4.onclick=function () {
    //         run(demo,"border" , "5px");
    //  }
    btn5.onclick=function () {
        run(demo,"top",200);
    }
    btn6.onclick=function () {
        run(demo,"left",400);
    }


    function run(obj,attr,target)  //谁的，哪个属性，改成多少
    {
        obj.timer=setInterval(function(){
            var cstyle=parseInt(getStyle(obj,attr));//得到当前样式
            var step=(target-cstyle)/10 ;//得到步长
            step=step>0 ? Math.ceil(step) : Math.floor(step); //取整步长
            obj.style[attr]=cstyle+step+"px"; //动画的基本原理：当前样式+步长

            if(parseInt(obj.style[attr])==target)
            {
                clearInterval(obj.timer);
            }

        },10)

    }


    function getStyle(obj,attr) //返回谁的，哪个属性
    {
        if(obj.currrentStyle)
        {
            return obj.currentStyle[attr];
        }
        else{
            return  window.getComputedStyle(obj,null)[attr]; //w3c浏览器
        }
    }

</script>

　　

关键代码：

1,  封装单个属性的运动框架函数，run ( obj , attr , target ) , 三个参数，”谁的“  “哪个属性”  “改成多少”

2, run(obj,attr,target)

　　先获取当前样式（调用getStyle(obj,attr)函数)，然后获取步长（步长公式：（target-cstyle)/10), 再取整步长 ，最后 给obj 赋予动画效果（动画的基本原理：当前样式+步长）；

btn1.onclick=function()
{
    run ( demo, "width" ,300);  
}

function run(obj, attr, target)
{
    timer=setInterval (function(){
          var cstyle=parseInt(getStyle(obj,attr));
          var step=(target-cstyle)/10;
          step=step>0 ? Math.ceil(step) :  Math.floor(step);
          obj.style[attr]=cstyle+step + "px";
          if(parseInt(obj.style[attr]==target))
          {
              clearInterval(timer);
           }
    },10)
}

function getStyle(obj,attr)
{
     if(obj.currentStyle)
    {
       return obj.currentStyle[attr];
     }
     else
       return  window.getComputedStyle[obj,null)[attr];
}

 

posted @ 2019-07-28 20:27  shanlu  阅读(195)  评论(0)  编辑  收藏  举报