Web APIs-day05 day05_Web APIs

1、Web APIs 05,昨日复习,Web APIs第05天-昨日复习,定时器分为_和_ location._跳转页面,Web APIs第05天-昨日复习,昨日复习,定时器分为setInterval和setTimeout location.href 跳转页面,Contents,目,录,元素偏移量 offset 系列 元素可视区 client 系列 元素滚动 scroll 系列 动画函数封装 常见网页特效案例,能够说出常见 offset 系列属性的作用 能够说出常见 client 系列属性的作用 能够说出常见 scroll 系列属性的作用 能够封装简单动画函数,目标,TARGET,要点提示,PC端

2、网页特效导读,掌握程度：了解,1.1 PC端网页特效导读,如何获取盒子的偏移距离? 根据谁来偏移的?,要点提示,offsetLeft和offsetTop获取元素偏移,掌握程度：应用,2.1 offsetLeft和offsetTop获取元素偏移,offsetLeft和offsetTop获取的到值是没有单位的 它俩是根据带有定位的父元素来获取值的,2.2 offsetLeft和offsetTop获取元素偏移,课堂问答,知识总结,如何获取元素自身的大小 offsetParent和parentNode的区别是什么?,要点提示,offsetWidth和offsetHeight获取元素大小,掌握程度：应用

3、,3.1 移动端轮播图-滚动图片,Offset和style的区别是什么?,要点提示,offset与style区别,掌握程度：应用,3.2 offset与style区别,offset 可以得到任意样式表中的样式值 而 style 只能得到行内样式表中的样式值 offset 系列获得的数值是没有单位的 而 style获取到的都要有px单位 offsetWidth 包含padding+border+width 而 style 只获取width的值 offsetWidth 等属性是只读属性，只能获取不能赋值 而 style可以获取,也可以赋值 所以，我们想要获取元素大小位置，用offset更合适 而

4、设置值可以用style来设置,3.3 移动端轮播图-无缝滚动,课堂问答,知识总结,如何获取鼠标在盒子内的坐标,要点提示,获取鼠标在盒子内的坐标,掌握程度：应用,4.1 获取鼠标在盒子内的坐标,用鼠标在页面当中的距离 盒子距离页面的距离 = 鼠标在盒子中的距离,4.2 获取鼠标在盒子内的坐标,课堂问答,知识总结,要点提示,拖动模态框（上）,掌握程度：应用,5.1 拖动模态框（上）,要点提示,拖动模态框（中）,掌握程度：应用,5.2 拖动模态框（中）,要点提示,拖动模态框（下）,掌握程度：应用,5.3 拖动模态框（下）,点击弹出层， 模态框和遮挡层就会显示出来 display:block; 点击关

5、闭按钮，模态框和遮挡层就会隐藏起来 display:none; 在页面中拖拽的原理： 鼠标按下并且移动， 之后松开鼠标 触发事件是鼠标按下 mousedown， 鼠标移动mousemove 鼠标松开 mouseup 拖拽过程: 鼠标移动过程中，获得最新的值赋值给模态框的left和top值， 这样模态框可以跟着鼠标走了 鼠标按下触发的事件源是 最上面一行，就是 id 为 title 鼠标的坐标 减去 鼠标在盒子内的坐标， 才是模态框真正的位置。 鼠标按下，我们要得到鼠标在盒子的坐标。 鼠标移动，就让模态框的坐标 设置为 ： 鼠标坐标 减去盒子坐标即可，注意移动事件写到按下事件里面。 鼠标松开，就

6、停止拖拽，就是可以让鼠标移动事件解除,5.4 拖动模态框（下）,课堂问答,知识总结,要点提示,仿京东放大镜效果页面结构搭建,掌握程度：应用,6.1 仿京东放大镜效果页面结构搭建,要点提示,仿京东放大镜效果显示隐藏遮挡层和大盒子,掌握程度：应用,6.2 仿京东放大镜效果显示隐藏遮挡层和大盒子,要点提示,仿京东放大镜效果遮挡层跟随鼠标,掌握程度：应用,6.3 仿京东放大镜效果遮挡层跟随鼠标,如何让黄色盒子限制在小盒子中,要点提示,12-仿京东放大镜效果限制遮挡层移动范围,掌握程度：应用,6.4 仿京东放大镜效果限制遮挡层移动范围,如何算出大图片移动的距离?,要点提示,仿京东放大镜效果大图片移动,掌

7、握程度：应用,6.5 仿京东放大镜效果大图片移动,上午复习,_是获取盒子距离带有父元素顶部的距离 _是获取带有定位的父元素 _是只读属性,Web APIs第05天-上午复习,上午复习,offsetTop是获取盒子距离带有父元素顶部的距离 offsetParent是获取带有定位的父元素 offset系列是只读属性,Web APIs第05天-上午复习,Client是获取什么值的,要点提示,client系列,掌握程度：应用,7.1 client系列,clientTop和clientLeft 是获取边框的宽度 clientWidth和clientHeight是获取盒子的内容大小+padding大小,7

8、.1 client系列,课堂问答,知识总结,什么是立即执行函数?,要点提示,立即执行函数,掌握程度：应用,7.2 立即执行函数,要点提示,淘宝flexibleJS源码分析之核心原理,掌握程度：了解,7.3 淘宝flexibleJS源码分析之核心原理,要点提示,淘宝flexibleJS源码分析之pageshow事件,掌握程度：应用,7.4 淘宝flexibleJS源码分析之pageshow事件,下面三种情况都会刷新页面都会触发 load 事件。 a标签的超链接 F5或者刷新按钮（强制刷新） 前进后退按钮 但是 火狐中，有个特点，有个“往返缓存”，这个缓存中不仅保存着页面数据，还保存了DOM和Ja

9、vaScript的状态；实际上是将整个页面都保存在了内存里。 所以此时后退按钮不能刷新页面。 此时可以使用 pageshow事件来触发。，这个事件在页面显示时触发，无论页面是否来自缓存。在重新加载页面中，pageshow会在load事件触发后触发；根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件，注意这个事件给window添加。,7.4 淘宝flexibleJS源码分析之pageshow事件,课堂问答,知识总结,如何获取被滚动出去的距离 和client系列有什么区别,要点提示,scroll系列,掌握程度：应用,8.1 scroll系列,scrollTop和s

10、crollLeft是获取被滚动出去的距离 clientHeight和scrollHeight在正常情况下是一样的 如果内容超出了盒子的大小,那么scrollHeight获取到的是内容大小,8.1 scroll系列,课堂问答,知识总结,要点提示,仿淘宝固定侧边栏（上）,掌握程度：应用,8.2 仿淘宝固定侧边栏（上）,要点提示,仿淘宝固定侧边栏（下）,掌握程度：应用,8.3 仿淘宝固定侧边栏（下）,三个系列的区别是什么,要点提示,三大系列总结,掌握程度：应用,8.4 三大系列总结,他们主要用法： offset系列 经常用于获得元素位置 offsetLeft offsetTop client 经常用

11、于获取元素大小 clientWidth clientHeight scroll 经常用于获取滚动距离 scrollTop scrollLeft 注意页面滚动的距离通过 window.pageXOffset 获得,8.4 三大系列总结,课堂问答,知识总结,两者的区别是什么,要点提示,22-mouseover和mouseenter区别,掌握程度：应用,9.1 mouseover和mouseenter区别,当鼠标移动到元素上时就会触发 mouseenter 事件 类似 mouseover，它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触发 之所以这样，就是因为mouseenter不会冒泡 跟mouseenter搭配 鼠标离开 mouseleave 同样不会冒泡,9.1 mouseover和mouseenter区别,课堂问答,知识总结,要点提示,动画原理,掌握程度：应用,10.1 动画原理,如何封装简单动画函数,要点提示,简单动画函数封装,掌握程度：应用,10.2 简单动画函数封装,如何给不同元素记录不同定时器?,要点提示