HTML5+CSS3+JavaScript Web前端开发案例教程课件：焦点图展示效果.pptxVIP

焦点图展示效果

案例介绍技术准备案例实现010203

01案例介绍

案例介绍案例名称：焦点图展示效果核心功能：焦点图布局图片获取焦点特效

案例介绍焦点图展示效果

02技术准备

技术准备jQueryDOM遍历方法：jQuery提供了很多种遍历DOM的方法，简单来说，DOM遍历就是根据其相对于其他HTML元素的关系来查找或选取目标元素。我们可以从某个DOM节点开始，然后沿着这个节点不断的移动，直至找到目标元素为止。

技术准备HTML的DOM元素就是一个树形结构。

技术准备jQuery祖先遍历方法：parent()方法，返回被选元素的直接父元素，该方法只会向上一级对DOM树进行遍历；parents()方法，返回被选元素的所有祖先元素，会一路向上遍历，直到文档的html根元素；parentsUntil()方法，返回介于两个给定元素之间的所有祖先元素。

技术准备祖先遍历示例代码：$(document).ready(function(){//返回span的直接父元素$(span).parent();//返回span的所有祖先元素$(span).parents();//返回介于span与div元素之间的所有祖先元素$(span).parentsUntil(div);});

技术准备jQuery同胞遍历方法：?siblings()方法，返回被选元素的所有同胞元素；?next()方法，返回被选元素的下一个同胞元素；?nextAll()方法，返回被选元素的所有跟随的同胞元素；?nextUntil()方法，返回介于两个给定参数之间的所有跟随的同胞元素；?prev()方法，返回被选元素的上一个同胞元素；?prevAll()方法，返回被选元素之前的所有同胞元素；?prevUntil()方法，返回介于两个给定参数之前的所有同胞元素。

技术准备同胞遍历示例代码：$(document).ready(function(){//返回h2的所有同胞元素$(h2).siblings();//返回h2的下一个同胞元素$(h2).next();//返回h2的所有跟随的同胞元素$(h2).nextAll();//返回介于h2与h6元素之间的所有同胞元素$(h2).nextUntil(h6);});

技术准备jQuery后代遍历方法：?children()方法，返回被选元素的所有直接子元素；?find()方法，返回被选元素的后代元素，一路向下直到最后一个后代。

技术准备后代遍历示例代码：$(document).ready(function(){//返回div元素的所有直接子元素$(div).children();//返回div子元素中所有的p元素$(div).children(p);//返回div后代中所有的span元素$(div).find(span);});

03案例实现

案例实现文件结构：