《第12讲js案例分析.pptx》由会员分享,可在线阅读,更多相关《第12讲js案例分析.pptx(14页珍藏版)》请在第壹文秘上搜索。
1、案例分析p 案例案例p 案例:图片滚动播放HTML页面布局页面布局功能要求功能要求p鼠标进去时,图片停止滚动。鼠标进去时,图片停止滚动。p 鼠标移开时,图片不间断,均速向左边平行滚动。鼠标移开时,图片不间断,均速向左边平行滚动。p 知识要点知识要点p HTML DOM setInterval() 方法方法HTML页面布局页面布局p 知识要点知识要点p HTML DOM clearInterval() 方法方法HTML页面布局页面布局p 知识要点知识要点p clearInterval() 方法实例方法实例HTML页面布局页面布局p 知识要点知识要点p offsetWidthHTML页面布局页面布
2、局javascript 中 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变poffsetWidth = width + padding + borderpoffsetHeight = height + padding + borderp 知识要点知识要点p offsetWidthHTML页面布局页面布局javascript 中 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变poffsetWidth = width + padding + borderpoffsetHeight = height + padding + bord
3、erp 知识要点知识要点p jQuery CSS 操作操作 - scrollLeft() 方法方法HTML页面布局页面布局p 知识要点知识要点p scrollLeft() 方法实例HTML页面布局页面布局p 案例分析案例分析p 第一步:在body中放入所要播放的图片。HTML页面布局页面布局p 案例分析案例分析p 第2步:为div容器和图片 设置样式。HTML页面布局页面布局p 案例分析案例分析p 第3步:设置图片滚动,无缝连接HTML页面布局页面布局p 案例分析案例分析p 第4步:设置鼠标进入图片时,图片停止滚动,移出图片时,继续滚动。HTML页面布局页面布局p 案例分析案例分析p 第5步:设置条件判断,当图片容器div的scrollleft大于所有图片所占有的宽度时,将div的scrollleft值重置为0。HTML页面布局页面布局