从零开始学 Web之BOM（三）offset，scroll，变速动画函数

大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新……

github：https://github.com/Daotin/Web

博客园：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、直接使用 document 获取的元素

1、案例：图片跟着鼠标移动

1、获取鼠标的横纵坐标在鼠标移动的事件中；

2、注意：图片能够移动，一定要脱标。

二、offset系列

三、scroll 系列

scroll：卷曲

1、封装获取 scrollLeft 和 scrollTop 的函数

1、返回的是一个对象，这个对象有两个自定义属性 left 和 top ，使用的时候直接使用 getScroll().left 或者 getScroll().top 即可获得浏览器滚动条向左向上移动的距离。

2、之所以用 “||” 操作是因为浏览器兼容问题。

四、变速动画函数

1、Math.ceil() 和 Math.round() 和 Math.floor() 的区别：

2、这里 onestep 使用向上取整，才能走到终点。

3、这里就不需要判断 if (Math.abs(current - target) >= onestep) 了，因为每次走的 onestep 总是越来越小，到最后都会变成1，所以不存在走不够或者超出的情况。

4、定时器中加个 return，可以防止走到终点，函数还在不停循环的情况。

1、案例：筋斗云

1、var currentPos = 10; 是因为我的 span 有个 maigin-left:10px，如果是从最左边开始的话就为 0。

五、获取任意元素的任意属性值

在 window 下有一个方法： 可以获取一个元素所有的属性值。

其中第一个参数为需要获取的元素；第二个参数为是否有伪类或者伪样式。返回值是这个元素所有属性的对象集合。

当我们需要什么属性的时候，点出来就可以了。

但是这个方法 IE8 不支持，在 IE8 下有一个属性 currentStyle， 通过 的方式可以得到返回值为这个元素所有属性的集合。

兼容代码：

六、为变速动画函数增强

1、增加任意一个属性值

getStyle 函数返回的属性值是加“px”的所以要加 进行处理。

2、增加任意多个属性值

1、既然需要多对属性，很自然的想到 json

2、在移动的时候使用 for in 循环遍历 json

3、因为每个属性达到目标值的次数不同，所以需要在所有属性都到达目标值时才清理定时器。

3、增加回调函数

回调函数：当一个函数作为参数的时候，这个函数就是回调函数。

作用：增加动画的次数。

1、回调函数的调用应该在循环之后，清理定时器之后调用。

2、测试 chrome、firefox 都可以， IE8 出错，显示 element.style[attr] = current + "px"; 有问题，暂时不知道什么原因。

4、增加透明度和层级

透明度：opacity

层级：z-Index

1、此为最终版变速动画函数。

2、透明度的设置因为是小数计算，所以需要都乘以100，最后再除以100.

3、层级 zIndex 不需要渐变，直接设置即可。

5、案例：手风琴效果

欢迎关注

Web前端之巅

念念不忘，必有回响。