关于javascript:day15-DOM运动

33次阅读

共计 4718 个字符，预计需要花费 12 分钟才能阅读完成。

day15 DOM 高级

1. 静止原理

1）静止原理

JavaScript 实现静止的原理，就是通过定时器一直扭转元素的地位，直至达到指标点后进行静止。通常，要让元素动起来，咱们会通过扭转元素的 left 和 top 值来扭转元素的绝对地位。

2）办法

    1. 静止的物体应用相对定位
    1. 通过扭转定位物体的属性（left、right、top、bottom）值来使物体挪动。例如向右或左挪动能够应用 offsetLeft（offsetRight）来管制左右挪动

3) 步骤：

    1. 开始静止前，先革除已有定时器（因为：如果间断点击按钮，物体会静止越来越快, 造成静止凌乱）
    1. 开启定时器，计算速度
    1. 把静止和进行隔开（if/else), 判断进行条件，执行静止

2. 匀速运动

问题：频繁点击按钮，因为每次点击 都要重新启动定时器，相当于减速

解决： 每次启动定时器时, 将上一个定时器革除 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 200px;
            left: 100px;
        }
        #box1{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            position: absolute;
            top: 400px;
            left: 200px;
        }
        
    </style>
    <body>
        <button type="button"> 启动 </button>
        <div id="box"></div>
        <div id="box1"></div>
    </body>
</html>
<script type="text/javascript">
    // 点击启动,div 块匀速运动
    let oBtn = document.querySelector('button');
    let oBox = document.querySelector('#box');
    let oBox1 = document.querySelector('#box1');
    let time = null;
    function startMove(obj){
        // 留神: 每次只能关上一个定时器, 否则再次点击会使得成果是减速成果
        clearInterval(time);
        time = setInterval(function(){
            obj.style.left = obj.offsetLeft + 5 + 'px';    
            // 使得静止进行的条件
            if(obj.offsetLeft > 600){
                obj.style.left = '600px';// 留神边界问题
                clearInterval(time);
            }
        },50);    //50ms 相当于一秒是 20 帧
    }
    oBtn.onclick = function(){
        // 调用封装的匀速运动的函数
        startMove(oBox1);
    }
</script>

3. 往返静止 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 200px;
            left: 100px;
        }
    </style>
    <body>
        <button type="button"><--</button>
        <button type="button">--></button>
        <div id="box">
            
        </div>
    </body>
</html>
<script type="text/javascript">
    let oBtns = document.querySelectorAll('button');
    let oBox = document.querySelector('#box');
    let time= null;
    // 参数是静止的元素和指标地位
    function startMove(obj, target){clearInterval(time);
        time = setInterval(function(){
            let speed = obj.offsetLeft >= target ? -5:5;
            obj.style.left = obj.offsetLeft + speed + 'px';
            // 静止进行的条件
            if(obj.offsetLeft <=0 || obj.offsetLeft>=1000){clearInterval(time);
            }
        },50);
    }
    
    oBtns[0].onclick = function(){startMove(oBox, 0);
    }
    oBtns[1].onclick = function(){startMove(oBox, 1000);
    }
</script>

4. 匀速通明静止

留神两点：

非行内的读 getComputedStyle(Dom 对象,false)[‘ 属性名 ’] 返回字符串；

Number(); 字符串转数字；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 200px;
            left: 300px;
            opacity: 0.5;
        }
    </style>
    <body>
        <div id="box"></div>
    </body>
</html>
<script type="text/javascript">
    var oBox = document.querySelector('#box');
    let time = null;
    function startMove(obj,target){clearInterval(time);
        time = setInterval(function(){// 非行内的读 getComputedStyle(Dom 对象,false)['属性名']  返回字符串
            let speed = getComputedStyle(obj,false)['opacity']<target?0.01:-0.01;
            oBox.style.opacity = Number(getComputedStyle(obj,false)['opacity']) + speed;    
        },50);
    }
    
    oBox.onmouseover = function(){startMove(oBox,1);
    }
    oBox.onmouseout = function(){startMove(oBox,0.1);
    }
</script>

5. 缓冲静止

如果挪动的像素小于半个像素，则会静止，看不到挪动。所以是要敞开定时器的。

 原理：// 缓冲静止原理
     let speed = (target-obj.offsetLeft)/ 系数; 系数是速度变化率，系数越大, 速度越慢 
    // 速度取整
     speed =  speed>0 ? Math.ceil(speed) : Math.floor(speed);// 外围算法 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width: 100px;
                height: 100px;
                background-color: #ADFF2F;
                position: absolute;
                top: 200px;
                left: 100px;
            }
        </style>
    </head>
    <body>
        <button type="button"> 启动 </button>
        <div id="box">
            
        </div>
    </body>
</html>
<script type="text/javascript">
    // 原理：// 缓冲静止原理
         // let speed = (target-obj.offsetLeft)/ 系数; 系数越大, 速度越慢 
         // speed =  speed>0 ? Math.ceil(speed) : Math.floor(speed);// 外围算法
        let oBox = document.querySelector('#box');
        let oBtn = document.querySelector('button');
        let time = null;
        function startMove(obj, target){clearInterval(time);
            time = setInterval(function(){let speed = (target-obj.offsetLeft)/10;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
                obj.style.left = obj.offsetLeft + speed + 'px';
                if(obj.offsetLeft == 500){clearInterval(time);
                }
            },50);
        }
        oBtn.onclick = function(){startMove(oBox, 500);
        }
</script>

6. 反弹静止

外围思路：当碰壁时将速度（位移）反向 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box,#box1,#box2,#box3{
                width: 50px;
                height: 50px;
                background-color: aqua;
                position: absolute;
                top: 100px;
                left: 100px;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <button type="button"> 启动 </button>
        <div id="box"></div>
    </body>
</html>
<script type="text/javascript">
    let oBtn = document.querySelector('button');
    let oBox = document.querySelector('#box');
    function startMove(obj){let [speedX,speedY] = [5,5];
        setInterval(function(){
            obj.style.left = obj.offsetLeft + speedX + 'px';
            obj.style.top = obj.offsetTop + speedY + 'px';
            // 碰壁的话将速度反向
            // 碰壁的那一刻会抖动, 加滚动条, 所以减个 10
            if(obj.offsetLeft<0 || obj.offsetLeft>innerWidth-obj.offsetWidth-10){speedX *= -1;}
            if(obj.offsetTop<0 || obj.offsetTop>innerHeight-obj.offsetHeight-10){speedY *= -1;}
        },50);
    }
    oBtn.onclick = function(){startMove(oBox);
    }
</script>

正文完
javascript
发表至： javascript
2021-01-16
 0
JS每日一题: Vue中mixin怎么理解？
Vue中watch对象内属性的方法
JavaScript 原型继承之精髓
关于javascript:lodash的lazyValue惰性求值