day05_Web APIs.ppt

Web APIs 05,昨日复习,Web APIs第05天-昨日复习,定时器分为_和_ location._跳转页面,Web APIs第05天-昨日复习,昨日复习,定时器分为setInterval和setTimeout location.href 跳转页面,Contents,目,录,元素偏移量 offset 系列元素可视区 client 系列元素滚动 scroll 系列动画函数封装常见网页特效案例,能够说出常见 offset 系列属性的作用 能够说出常见 client 系列属性的作用 能够说出常见 scroll 系列属性的作用 能够封装简单动画函数,目标,TARGET,要点提示,PC端网页特效导读,掌握程度：了解,1.1 PC端网页特效导读,如何获取盒子的偏移距离?根据谁来偏移的?,要点提示,offsetLeft和offsetTop获取元素偏移,掌握程度：应用,2.1 offsetLeft和offsetTop获取元素偏移,offsetLeft和offsetTop获取的到值是没有单位的它俩是根据带有定位的父元素来获取值的,2.2 offsetLeft和offsetTop获取元素偏移,课堂问答,知识总结,如何获取元素自身的大小offsetParent和parentNode的区别是什么?,要点提示,offsetWidth和offsetHeight获取元素大小,掌握程度：应用,3.1 移动端轮播图-滚动图片,Offset和style的区别是什么?,要点提示,offset与style区别,掌握程度：应用,3.2 offset与style区别,offset 可以得到任意样式表中的样式值 而 style 只能得到行内样式表中的样式值offset 系列获得的数值是没有单位的 而 style获取到的都要有px单位offsetWidth 包含padding+border+width 而 style 只获取width的值offsetWidth 等属性是只读属性，只能获取不能赋值 而 style可以获取,也可以赋值所以，我们想要获取元素大小位置，用offset更合适 而 设置值可以用style来设置,3.3 移动端轮播图-无缝滚动,课堂问答,知识总结,如何获取鼠标在盒子内的坐标,要点提示,获取鼠标在盒子内的坐标,掌握程度：应用,4.1 获取鼠标在盒子内的坐标,用鼠标在页面当中的距离 盒子距离页面的距离=鼠标在盒子中的距离,4.2 获取鼠标在盒子内的坐标,课堂问答,知识总结,要点提示,拖动模态框（上）,掌握程度：应用,5.1 拖动模态框（上）,要点提示,拖动模态框（中）,掌握程度：应用,5.2 拖动模态框（中）,要点提示,拖动模态框（下）,掌握程度：应用,5.3 拖动模态框（下）,点击弹出层，模态框和遮挡层就会显示出来 display:block;点击关闭按钮，模态框和遮挡层就会隐藏起来 display:none;在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标触发事件是鼠标按下 mousedown，鼠标移动mousemove 鼠标松开 mouseup拖拽过程:鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框可以跟着鼠标走了鼠标按下触发的事件源是 最上面一行，就是 id 为 title 鼠标的坐标 减去 鼠标在盒子内的坐标，才是模态框真正的位置。鼠标按下，我们要得到鼠标在盒子的坐标。鼠标移动，就让模态框的坐标 设置为：鼠标坐标 减去盒子坐标即可，注意移动事件写到按下事件里面。鼠标松开，就停止拖拽，就是可以让鼠标移动事件解除,5.4 拖动模态框（下）,课堂问答,知识总结,要点提示,仿京东放大镜效果页面结构搭建,掌握程度：应用,6.1 仿京东放大镜效果页面结构搭建,要点提示,仿京东放大镜效果显示隐藏遮挡层和大盒子,掌握程度：应用,6.2 仿京东放大镜效果显示隐藏遮挡层和大盒子,要点提示,仿京东放大镜效果遮挡层跟随鼠标,掌握程度：应用,6.3 仿京东放大镜效果遮挡层跟随鼠标,如何让黄色盒子限制在小盒子中,要点提示,12-仿京东放大镜效果限制遮挡层移动范围,掌握程度：应用,6.4 仿京东放大镜效果限制遮挡层移动范围,如何算出大图片移动的距离?,要点提示,仿京东放大镜效果大图片移动,掌握程度：应用,6.5 仿京东放大镜效果大图片移动,上午复习,_是获取盒子距离带有父元素顶部的距离 _是获取带有定位的父元素 _是只读属性,Web APIs第05天-上午复习,上午复习,offsetTop是获取盒子距离带有父元素顶部的距离 offsetParent是获取带有定位的父元素 offset系列是只读属性,Web APIs第05天-上午复习,Client是获取什么值的,要点提示,client系列,掌握程度：应用,7.1 client系列,clientTop和clientLeft 是获取边框的宽度clientWidth和clientHeight是获取盒子的内容大小+padding大小,7.1 client系列,课堂问答,知识总结,什么是立即执行函数?,要点提示,立即执行函数,掌握程度：应用,7.2 立即执行函数,要点提示,淘宝flexibleJS源码分析之核心原理,掌握程度：了解,7.3 淘宝flexibleJS源码分析之核心原理,要点提示,淘宝flexibleJS源码分析之pageshow事件,掌握程度：应用,7.4 淘宝flexibleJS源码分析之pageshow事件,下面三种情况都会刷新页面都会触发 load 事件。a标签的超链接F5或者刷新按钮（强制刷新）前进后退按钮但是 火狐中，有个特点，有个“往返缓存”，这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的状态；实际上是将整个页面都保存在了内存里。所以此时后退按钮不能刷新页面。此时可以使用 pageshow事件来触发。，这个事件在页面显示时触发，无论页面是否来自缓存。在重新加载页面中，pageshow会在load事件触发后触发；根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件，注意这个事件给window添加。,7.4 淘宝flexibleJS源码分析之pageshow事件,课堂问答,知识总结,如何获取被滚动出去的距离和client系列有什么区别,要点提示,scroll系列,掌握程度：应用,8.1 scroll系列,scrollTop和scrollLeft是获取被滚动出去的距离clientHeight和scrollHeight在正常情况下是一样的如果内容超出了盒子的大小,那么scrollHeight获取到的是内容大小,8.1 scroll系列,课堂问答,