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）