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