zoukankan      html  css  js  c++  java
  • JS第一个动画

    描述:让页面中的一个盒子平稳向右移动到指定位置

    <div id="div1">

    <div>

    JS代码实现

    <script type="text/javascript">
        // 实现简单动画
        // 避免获取类似div1.style.left的值
        // 且它的值带有单位px
        var div1 = document.getElementById('div1');
        var left = 0;                    // 实时反映元素的x坐标值
        // 让动画增加x坐标值,使其向右移动
        var toRight = function() {
            // 错误:每次执行时,无需再从div1.style.left获取x坐标的值
            // 因为已经用全局变量left记录了该信息
            // left = div1.style.left;
    
            // 当盒子到达指定目标后,停止动画
            if (left < 500) {
                left += 1;
            }
            // 为盒子设置的新坐标值
            div1.style.left = left + 'px';
            setTimeout(toRight, 25);
        };
        toRight();                    // 开始动画
    </script>

    去掉注释后的代码再看看这几行代码

    <script type="text/javascript">
        var div1 = document.getElementById('div1');
        var left = 0;
        
        var toRight = function() {
            if (left < 500) {
                left += 1;
            }
            div1.style.left = left + 'px';
            setTimeout(toRight, 25);
        };
        toRight();                    
    </script>

    小结:

    获取DOM样式时,如果样式在style标签中定义不能通过style对象获取的,如div1.style.left,但却可以设置它的值

    在获取和设置时,要注意数值带有单位(px)

  • 相关阅读:
    C:大数相加
    杭电2186:悼念512汶川大地震遇难同胞——一定要记住我爱你
    实验五
    安装vmtools
    ubuntu20.04换源
    实验一 灯程序——OK6410A开发板LINUX3.0.1(嵌入式开发)
    OK6410A开发板LINUX3.0.1配置(嵌入式开发)
    实验四 Makefile
    虚拟机联网
    实验三 按键灯
  • 原文地址:https://www.cnblogs.com/mackxu/p/animal-first.html
Copyright © 2011-2022 走看看