Dom&Bom重点，运动框架

js运动框架

体现物体的变化过程，对元素位置和状态改变的一个描述

缓冲运动

描述元素变化并且初始位置到最终位置的一个变化的一个视觉效果，越到最终位置越慢的一个过程
给我们的div和span写的css样式 ，为了使我们看的舒服一些

 #wrapper{
            width: 400px;
            height: 80px;
            background: orange;
            position: absolute;
            left: -400px;
            top: 200px;
        }
        #wrapper span{
            width: 50px;
            height: 80px;
            background: red;
            position: absolute;
            right: -50px;
            top: 0;
        }

这缓冲运动的js代码部分

<div id="wrapper">
        <span></span>
    </div>
    <script>
        var div = document.getElementById("wrapper");
        var span=document.getElementsByTagName("span")[0];
        var timer= null;
        //鼠标移入
        div.onmouseover=function(){
                show(div,0)
        }
        div.onmouseleave=function(){
            show(div,-400)
        }
        function show(dom,target){
                    clearInterval(timer);
                   
                    timer=setInterval(function(){
                        var speed = null;//步长

                        speed = (target-dom.offsetLeft)/8;
                        //步长判断条件
                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                        if(target==dom.offsetLeft){
                            clearInterval(timer);
                        }else{
                            dom.style.left=dom.offsetLeft+speed+"px";
                        }
                    },30)
        }
    </script>

二、多个物体发生不同的的变化

让四个物体每个发生不同的变化，

 <div></div>
  <div></div>
   <div></div>
    <div></div>
 <script>
  var divArray = document.getElementsByTagName("div");
        divArray[0].onclick = function() {
            startMove(this, 'width', 400);
        }
        divArray[1].onclick = function() {
            startMove(this, 'height', 400);
        }
        divArray[2].onclick = function() {
            startMove(this, 'borderWidth', 20);
        }
        divArray[3].onclick = function() {
            startMove(this, 'opacity', 50);
        }
        //运动框架
        function startMove(dom, attr, target) {
            clearInterval(dom.timer);
            dom.timer = setInterval(function() {
                var speed = null,
                    iCur = null;
                //判断属性是否为opacity
                if (attr == "opacity") {
                    iCur = parseFloat(getStyle(dom, attr) * 100);
                } else {
                    iCur = parseInt(getStyle(dom, attr));
                }
                //步长
                speed = (target - iCur) / 7;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if (iCur == target) {
                    clearInterval(dom.timer)
                }
                if (attr == "opacity") {
                    dom.style.opacity = (speed + iCur) / 100;
                } else {
                    dom.style[attr] = speed + iCur + "px";
                }
            }, 200)
        }
        //获取元素属性函数
        function getStyle(dom,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(dom,null)[attr]
            }else{
                return dom.currentStyle[attr]
            }
        }
    </script>

一个物体发生不同的变化

有了上面的基础我们可以将四个物体的变化放到一个元素上面，元素即对象

 <div id="top"></div>
    <script>
        var div = document.getElementById("top");
        console.log(div);
        div.onclick = function() {
            startMove(this, {
                width: 400,
                height: 400,
                left: 100,
                top: 300,
                opacity: 50,
            });
        }

        function startMove(dom, obj) {
            clearInterval(dom.timer)
            var speed = null,
                iCur = null;

            dom.timer = setInterval(function() {
                //开关控制样式达到所需目标及停止定时器
                var bo = true;
                //遍历对象
                for (var attr in obj) {
                    // console.log(attr);
                    // console.log(obj[attr]);
                    //判断属性是否为opacity
                    if (attr == "opacity") {
                        iCur = parseFloat(getStyle(dom, attr) * 100);
                    } else {
                        iCur = parseInt(getStyle(dom, attr));
                    }
                    //步长
                    speed = (obj[attr] - iCur) / 7;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    // if (iCur == target) {
                    //     clearInterval(dom.timer)
                    // }
                    if (attr == "opacity") {
                        dom.style.opacity = (speed + iCur) / 100;
                    } else {
                        dom.style[attr] = speed + iCur + "px";
                    }
                    //开关关闭条件
                    if (iCur != obj[attr]) {
                        bo = false;
                    }
                }
                //取消定时器
                if (bo) {
                    clearInterval(dom.timer);
                }

            }, 200)
        }
<script>

运动框架就是一个对元素的变化过程的描述，