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)

  • 相关阅读:
    CSS进阶-深入理解vertical-align和line-height的关系
    困难的串【转】
    【转】常用 Git 命令清单
    程序员常用等宽字体
    IE的特有属性hasLayout和BFC
    css深入理解之行高line-height
    mysql 索引优化,不走索引的原因
    php解决高并发(文件锁)
    mysql索引详解
    http错误代码
  • 原文地址:https://www.cnblogs.com/mackxu/p/animal-first.html
Copyright © 2011-2022 走看看