第12讲 js案例分析
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
案例分析
授课教师:魏丽芬
案例
案例：图片滚动播放
功能要求 鼠标进去时，图片停止滚动。 鼠标移开时，图片不间断，均速向左边平行滚动。
HTML
页 面 布 局
知识要点
HTML DOM setInterval() 方法
HTML
页 面 布 局
知识要点
HTML DOM clearInterval() 方法
HTML
片所占有的宽度时，将div的scrollleft值重置为0。
页 面 布 局
HTML
页 面 布 局
offsetHeight = height + padding + border
知识要点
offsetWidth
javascript 中 offsetWidth 是对象的可见宽度，包滚动条等边线，会 随窗口的显示大小改变 offsetWidth = width + padding + border
HTML
页 面 布 局
案例分析
设置样式。
第2步：为div容器和图片
HTML
页 面 布 局
案例分析
第3步：设置图片滚动，无缝连接
HTML
页 面 布 局
案例分析
第4步：设置鼠标进入图片时，图片停止滚动，移出图片时，继
HTML
续滚动。
页 面 布 局
案例分析
第5步：设置条件判断，当图片容器div的scrollleft大于所有图
HTML
页 面 布 局
知识要点
clearInterval() 方法实例
HTML
页 面 布 局
知识要点
offsetWidth
javascript 中 offsetWidth 是对象的可见宽度，包滚动条等边线，会 随窗口的显示大小改变 offsetWidth = width + padding + border
HTML
页 面 布 局
offsetHeight = height + padding + border
知识要点
jQuery CSS 操作 - scrollLeft() 方法
HTML
页 面 布 局
Leabharlann Baidu
知识要点
scrollLeft() 方法实例
HTML
页 面 布 局
案例分析
第一步：在body中放入所要播放的图片。
授课教师:魏丽芬
案例
案例：图片滚动播放
功能要求 鼠标进去时，图片停止滚动。 鼠标移开时，图片不间断，均速向左边平行滚动。
HTML
页 面 布 局
知识要点
HTML DOM setInterval() 方法
HTML
页 面 布 局
知识要点
HTML DOM clearInterval() 方法
HTML
片所占有的宽度时，将div的scrollleft值重置为0。
页 面 布 局
HTML
页 面 布 局
offsetHeight = height + padding + border
知识要点
offsetWidth
javascript 中 offsetWidth 是对象的可见宽度，包滚动条等边线，会 随窗口的显示大小改变 offsetWidth = width + padding + border
HTML
页 面 布 局
案例分析
设置样式。
第2步：为div容器和图片
HTML
页 面 布 局
案例分析
第3步：设置图片滚动，无缝连接
HTML
页 面 布 局
案例分析
第4步：设置鼠标进入图片时，图片停止滚动，移出图片时，继
HTML
续滚动。
页 面 布 局
案例分析
第5步：设置条件判断，当图片容器div的scrollleft大于所有图
HTML
页 面 布 局
知识要点
clearInterval() 方法实例
HTML
页 面 布 局
知识要点
offsetWidth
javascript 中 offsetWidth 是对象的可见宽度，包滚动条等边线，会 随窗口的显示大小改变 offsetWidth = width + padding + border
HTML
页 面 布 局
offsetHeight = height + padding + border
知识要点
jQuery CSS 操作 - scrollLeft() 方法
HTML
页 面 布 局
Leabharlann Baidu
知识要点
scrollLeft() 方法实例
HTML
页 面 布 局
案例分析
第一步：在body中放入所要播放的图片。