从零开始学 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前端之巅

念念不忘,必有回响。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180627G1MFH100?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券