>大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
>
> - github：https://github.com/Daotin/Web
> - 微信公众号：[Web前端之巅](https://github.com/Daotin/pic/raw/master/wx.jpg)
> - 博客园：http://www.cnblogs.com/lvonve/
> - CSDN：https://blog.csdn.net/lvonve/
>
> 在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
# 一、直接使用 document 获取的元素
```javascript
// 获取 body
document.body;
// 获取 title
document.title; // 获取的是 title 中的值
// 获取 html
document.documentElement;
```
## 1、案例：图片跟着鼠标移动
```html
Title
```
> 1、获取鼠标的横纵坐标在鼠标移动的事件中；
>
> 2、注意：图片能够移动，一定要脱标。
---
# 二、offset系列
```
offsetWidth：获取元素的宽（加边框）
offsetHeight：获取元素的高（加边框）
offsetLeft：获取元素距离左边位置的值
offsetTop：获取元素距离上边位置的值
```
# 三、scroll 系列
scroll：卷曲
```
scrollWidth：如果元素中内容宽度小于元素的宽度，则为元素的宽度（不含边框），否则为元素中内容的实际宽度。
scrollHeight：如果元素中内容高度小于元素的高度，则为元素的高度（不含边框），否则为元素中内容的实际高度。
scrollLeft：元素中的内容往左卷曲出去的距离。（有滚动条的时候）
scrollTop：元素中的内容往上卷曲出去的距离。（有滚动条的时候）
```
**获取页面实际的宽高：**
```js
document.documentElement.scrollWidth || document.body.scrollWidth;
document.documentElement.scrollHeight || document.body.scrollHeight;
```
## 1、封装获取 scrollLeft 和 scrollTop 的函数
```javascript
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
};
}
```
> 1、返回的是一个对象，这个对象有两个自定义属性 left 和 top ，使用的时候直接使用 getScroll().left 或者 getScroll().top 即可获得浏览器滚动条向左向上移动的距离。
> 2、之所以用 “||” 操作是因为浏览器兼容问题。
# 四、变速动画函数
```javascript
// 变速动画移动函数
function animation(element, target) {
clearInterval(element.timeId); // 每次调用函数就清理之前的timeId
// 判断当前的位置
element.timeId = setInterval(function () {
var current = element.offsetLeft; // 不能使用 element.style.left
var onestep = (target - current) / 10;
onestep = onestep > 0 ? Math.ceil(onestep) : Math.floor(onestep);
current += onestep;
element.style.left = current + "px";
// if (Math.abs(current - target) >= onestep) {
// element.style.left = current + "px";
// } else {
// clearInterval(timeId);
// element.style.left = target + "px";
// }
if(target === current) {
clearInterval(element.timeId);
return;
}
// 测试代码
console.log("target="+target+", current="+current+", step="+onestep);
}, 20);
}
```
> 1、Math.ceil() 和 Math.round() 和 Math.floor() 的区别：
```javascript
zconsole.log(Math.ceil(11.1)); // 12
console.log(Math.ceil(11.8)); // 12
console.log(Math.ceil(-11.1)); // -11
console.log(Math.ceil(-11.8)); // -11
console.log(Math.round(11.1)); // 11
console.log(Math.round(11.8)); // 12
console.log(Math.round(-11.1)); // -11
console.log(Math.round(-11.8));// -12
console.log(Math.floor(11.1)); // 11
console.log(Math.floor(11.8)); // 11
console.log(Math.floor(-11.1)); // -12
console.log(Math.floor(-11.8)); // -12
```
> 2、这里 onestep 使用向上取整，才能走到终点。
>
> 3、这里就不需要判断 if (Math.abs(current - target) >= onestep) 了，因为每次走的 onestep 总是越来越小，到最后都会变成1，所以不存在走不够或者超出的情况。
>
> 4、定时器中加个 return，可以防止走到终点，函数还在不停循环的情况。
## 1、案例：筋斗云
```html
Title
```
> 1、var currentPos = 10; 是因为我的 span 有个 maigin-left:10px，如果是从最左边开始的话就为 0。
>
# 五、获取任意元素的任意属性值
在 window 下有一个方法：`window.getComputedStyle(element, string)` 可以获取一个元素所有的属性值。
其中第一个参数为需要获取的元素；第二个参数为是否有伪类或者伪样式。返回值是这个元素所有属性的对象集合。
当我们需要什么属性的时候，点出来就可以了。
但是这个方法 IE8 不支持，在 IE8 下有一个属性 currentStyle， 通过 `元素.currentStyle` 的方式可以得到返回值为这个元素所有属性的集合。
**兼容代码：**
```javascript
function getStyle(element, attr) {
return window.getComputedStyle ?
window.getComputedStyle(element, null)[attr] :
element.currentStyle[attr];
}
```
# 六、为变速动画函数增强
## 1、增加任意一个属性值
```html
Title
```
> getStyle 函数返回的属性值是加“px”的所以要加 `parseInt` 进行处理。
## 2、增加任意多个属性值
```html
```
> 1、既然需要多对属性，很自然的想到 json
>
> 2、在移动的时候使用 for in 循环遍历 json
>
> 3、因为每个属性达到目标值的次数不同，所以需要在所有属性都到达目标值时才清理定时器。
## 3、增加回调函数
回调函数：当一个函数作为参数的时候，这个函数就是回调函数。
作用：增加动画的次数。
```html
```
> 1、回调函数的调用应该在循环之后，清理定时器之后调用。
>
> 2、测试 chrome、firefox 都可以， IE8 出错，显示 element.style[attr] = current + "px"; 有问题，暂时不知道什么原因。
## 4、增加透明度和层级
透明度：opacity
层级：z-Index
```html
Title
```
> 1、此为最终版变速动画函数。
>
> 2、透明度的设置因为是小数计算，所以需要都乘以100，最后再除以100.
>
> 3、层级 zIndex 不需要渐变，直接设置即可。
## 5、案例：手风琴效果
```html
Title
```