day15 DOM运动

头像
shasha
    阅读 7 分钟

    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
    shasha
    28 声望7 粉丝
    « 上一篇
    day07
    下一篇 »
    day16 初识面向对象编程

    引用和评论

    推荐阅读
    头像
    day34 gulp

    shasha阅读 1.2k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.4k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.3k评论 2

    0 条评论
    得票最新