第8章 jQuery特效实战-【千锋教育】Jquery从入门到实战

第8章 jQuery特效实战 交互特效 动画特效 交互特效 动画特效 ☞点击查看本小节知识架构 ☞点击查看本小节知识架构 8.2 8.1 学习目标 掌握 掌握 掌握 掌握网页中常见特效的实现方法 1 2 掌握前端与用户交互效果的实现方法 3 掌握利用jQuery实现动画特效的方法 销售额 掌握知识 理解知识 熟悉 知识 3.333333 3.333333 3.333333 通过前面章节的学习，大家已经对jQuery的常见语法有了一定的了解。合理地利用jQuery库进行特效开发，会比使用原生JavaScript进行特效开发节省更多的资源，而且能够提高代码效率，具有保证兼容性、提高性能等优点。接下来将通过实际项目中的案例带领大家感受jQuery的强大之处。 8.1 交互特效 8.1.1 星级评分 返回目录 8.1.2 内容穿梭框 8.1.3 自定义滚动条 8.1 交互特效 先来看一下利用jQuery如何开发常见的交互特效。这些特效都是网页中常见的效果，学会一些基本思路后，可以举一反三，实现更多类似的效果。 在很多网站都有对产品的评价功能，一般采用的形式是“星级评分”，图所示为豆瓣电影中的星级评分。 8.1.1 星级评分 8.1 交互特效 星级评分需求说明如下。 （1）鼠标指针移到相应的星星上，根据当前星星的位置来决定选中的效果，例如，鼠标指针移到第三颗星星，那么前三颗星星被选中，鼠标指针移到第四颗星星，那么前四颗星星被选中。 （2）当鼠标单击指定星星时，状态被锁定，并且显示评分结果。 （3）当鼠标指针再次移入，又可以重新进行评分操作。 首先准备好图所示的两张图片，左侧图片表示已选中的星星，右侧图片表示未选中的星星。 8.1.1 星级评分 8.1 交互特效 8.1.1 星级评分 8.1 交互特效 图片准备好后就开始构建图片的结构，具体代码如下所示。 8.1.1 星级评分 8.1 交互特效 要实现需求（1），可以用jQuery的index()方法获取当前的索引值，利用索引值来区分选中元素之前的部分和选中元素之后的部分，再通过slice()方法分割前段和后段，具体代码如下所示。 8.1.1 星级评分 8.1 交互特效 当鼠标指针快速滑过元素时，会出现闪烁现象，因为鼠标指针从一个元素移入到另一个元素时，会触发短暂的mouseout事件，这种问题可以利用clearTimeout()的延迟特性来解决。 8.1.1 星级评分 8.1 交互特效 要实现需求（2）和需求（3），可以利用变量oldIndex，当鼠标单击时，设置oldIndex值，以记录单击的位置。 数据可利用一个JSON对象来模拟，并配合索引完成功能，完整的jQuery代码参考教材8.1.1节。 8.1.2 内容穿梭框 8.1 交互特效 很多管理后台系统都有内容穿梭框的功能需求，图所示为某管理后台的内容穿梭框效果。 8.1.2 内容穿梭框 8.1 交互特效 需求说明如下。 （1）单击左侧框或右侧框中的列表项，实现选中状态；再次单击，取消选中状态。 （2）单击向右的按钮，可以把左侧框中选中的列表项添加到右侧框中；单击向左按钮，可以把右侧框中选中的列表项添加到左侧框中。 首先完成页面结构和布局，完整的jQuery代码参考教材8.1.2节。 要实现需求（1），首选需要通过事件委托的方式，让左右列表可以动态地添加事件；然后创建一个方法，统一实现单击选中状态和取消选中状态，包括列表项和向左、向右按钮，完整的jQuery代码参考教材8.1.2节。 8.1.2 内容穿梭框 8.1 交互特效 要实现需求（2），需要给向左、向右按钮添加单击操作，并利用DOM节点的添加和删除方法来实现剪切功能，如append()和remove()等方法，完整的jQuery代码参考教材8.1.2节。 8.1.3 自定义滚动条 8.1 交互特效 网页中默认的滚动条效果有时候无法满足需求，需要自定义滚动条来达成整体设计风格的统一，这就要用jQuery来模拟实现。优酷新闻列表页中的自定义滚动条效果如图所示。 8.1.3 自定义滚动条 8.1 交互特效 需求说明如下。 （1）模拟出滚动条，滑动可以通过鼠标进行y轴上的拖曳。 （2）对滑动拖曳的限制范围，使其在指定的范围内移动。 （3）通过滑动的拖曳来控制列表内容的移动。 （4）根据列表内容的多少来决定滑块的长短。 首先完成结构和布局，完整的jQuery代码参考教材8.1.3节。 8.1.3 自定义滚动条 8.1 交互特效 要实现需求（1），需要利用mousedown、mousemove、mouseup三个事件来实现按下、拖曳和抬起操作，再配合变量disY计算出滑块跟随的需求，代码如下所示。 8.1.3 自定义滚动条 8.1 交互特效 要实现需求（2），需要对top值进行限制