第12讲js案例分析.pptx

《第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页面布局页面布局