DOM day7

DOM JavaScript

1. 动画基础知识

前几天学习利用DOM技术修改文档的样式信息。用JavaScript添加样式信息可以节约时间和精力，但总归来说，CSS是完成这类任务的最佳工具。但如果想随着时间的变化而不断改变某个元素的样式，只能使用JavaScript。JavaScript能够按照预定的时间间隔重复调用一个函数。
动画是样式随时间变化的完美例子。简单来说，动画就是让元素的位置随着时间而不断地发生变化。

1. 位置

网页元素在浏览器窗口的位置是一种表示性的信息。故位置信息通常是CSS负责设置的。例如：

element{
    position: absolute;
    top: 50px;
    left: 100px;
}

上面代码的意思是，element元素摆放到距离浏览器窗口的左边界100像素，距离上边界50像素的位置。下面是实现同样效果的DOM代码：

element.style.position = "absolute";
element.style.left = "100px";
element.style.top = "50px";

position属性的合法值有static、fixed、relative和absolute四种。
* static是默认值，意思是有关元素将按照它们在标记里的先后顺序出现在浏览器窗口里。
* relative含义与static相似，区别是position属性等于relative的元素还可以（通过应用float属性）从文档的正常显示顺序里脱离出来。
* absolute属性的元素，可以把它摆放到容纳它的“容器”的任意位置。这个容器要么是文档本身，要么是一个有着fixed或absolute属性的父元素。这个元素在原始标记里出现的位置与显示位置无关，显示位置有top、left、right和bottom等属性决定。

2. 时间

JavaScript函数setTimeout能够让某个函数在经过一段预定的时间之后才开始执行。函数带有两个参数：第一个参数通常是一个字符串，其内容是将要执行的那个函数的名字；第二个参数是一个数值，以毫秒为单位设定了需要经过多长时间后才开始执行第一个参数所给出的函数，且绝大多数时间，把这个函数调用赋值给一个变量：

variable = setTimeout("function", interval)

如果想取消某个正在排队等待执行的函数，可以使用clearTimeout的函数，需要一个参数——保存着某个setTimeout函数调用返回值的变量：

clearTimeout(variable)

例如;

    movement = setTimeout("moveMessage()",500);

500毫秒后执行moveMessage函数。这里没有用var声明movement，因为它是一个全局变量，意味着这个跳跃行为可以在当前函数以外的地方被取消。

3. 时间递增量

在确定当前位置时，

element.style.left
element.style.top

返回值都是字符串，需要使用JavaScript函数parseInt把字符串里的数值信息提取出来，返回一个数值：

parseInt(string)

parseInt函数的返回值通常是整数。如果需要提取的是带小数点的数值（即浮点数），使用对应的parseFloat函数。

注：JS被调用时，需要把最底层的js文件先加载，否则找不到函数。

CSS的overflow属性可以用来处理一个元素的尺寸超出其容器尺寸的情况。当一个元素包含的内容超出自身的大小，就会发生内容溢出。overflow属性可取值有4种：
* visible：不裁剪溢出的内容。浏览器将把溢出的内容呈现在其容器元素的显示区域以外，全部内容都可见。
* hidden： 隐藏溢出的内容。内容只显示在其容器元素的显示区域里。意味着只有一部分可见。
* scroll： 类似hidden，浏览器将对溢出的内容进行隐藏，但显示一个滚动条一边让用户能够滚动看到内容的其他部分。
* atuo：类似scroll，但浏览器只在确实发生溢出时才显示滚动条。如果内容没有溢出，就不显示滚动条。

如果把position属性值是absolute的元素A放入一个position属性值是relative的元素B，B就成为A的容器元素，而A将在B的显示区域按照absolut方式进行摆放。

Math对象ceil方法，返回一个不小于本身的值的一个整数：

Math.ceil(number)

ceil方法可以把浮点数向大于方向舍入为与之最接近的整数。与之相对的是floor方法，把浮点数向小于方向舍入为与之最接近的整数。round方法把浮点数舍入为与之最接近的整数：

Math.floor(number)
Math.round(number)