jQuery和Ajax实战教程（第2版）课件 第5章-常见特效开发

第5章常见特效开发掌握万千网页特效背后的原理7个实战案例动画原理深度解析信号量编程模式本章学习目标系统学习常见网页特效开发掌握轮播、滚动、动画等核心特效技术掌握动画实现的核心原理理解"克隆+瞬移"等视觉欺骗技巧学会信号量编程模式多按钮协作，状态协调的核心方法理解"克隆+瞬移"魔术技巧揭秘无缝循环动画背后的实现机制实战案例1：无穷连续滚动动画无缝连续滚动特效是网页中用于信息展示的常用特效，如图5-1所示。一排图片连续从右向左运动，首尾相接从不间断、周而复始。当用户鼠标触碰它的时候，动画会暂时停止；用户鼠标移开，动画继续。实战案例1：无穷连续滚动动画CASE01核心原理01克隆图片队列形成"小火车"02运动到临界点瞬间移回原点03利用视觉欺骗实现"周而复始"视觉欺骗瞬间移动时展示内容与初始内容相同，用户察觉不到"乾坤大挪移"实战案例1：无穷连续滚动动画最核心算法：实战案例2：跑马灯轮播跑马灯轮播是最常见的轮播图形式，如图5-6所示。当点击左右按钮或者小圆点时，图片将通过左右水平运动进行切换，如图5-7所示。跑马灯轮播特效的原理和“无缝连续滚动动画”类似：多张图片排成一排，形成一队“小火车”，单击按钮或小圆点时调用animate()函数使“小火车”进行运动。而由于大盒子设置了overflow:hidden“溢出隐藏”，所以我们同一时间只能看见一张图片。就像从魔术师的帽子里变出的兔子实际上是提前准备好的，跑马灯轮播图布局中虽然只能看见一张图片，但是我们知道它只是一个“火车头”，它右侧还有多张图片，只不过被“溢出隐藏”了。“小火车”以大盒子为基准进行绝对定位，初始left值是0。left值减小，“小火车”将左移，从而显示出后面的“车厢”：假设每张图片宽度都是500px，如果“小火车”的left值变为-500px，那么将恰好显示1号图片；如果“小火车”的left值变为-1000px，那么将恰好显示2号图片，以此类推，如图58所示。实战案例2：跑马灯轮播实战案例2：跑马灯轮播idx信号量编程模式idx全局变量标识记录当前显示的图片编号多元素共享左右按钮、小圆点协同工作克隆首图实现无缝循环切换防止动画积累使用is(":animated")核心代码逻辑执行流程点击按钮idx++改变信号量移动小火车varidx=0;//克隆第一张图片if($("#unit").is(":animated"))return;idx++;$("#unit").animate({"left":idx*-500},400);实战案例3：上下滑动跑马灯双信号量编程模式idx当前显示的大图记录用户正在查看的大图编号，由触碰缩略图触发改变触碰缩略图改变大图small_idx当前打头的缩略图记录缩略图列表的"打头"位置，由上下按钮控制上下按钮移动缩略图两个信号量独立控制，互不干扰布局特点纵向布局大图和缩略图列表排成两列溢出隐藏overflow:hidden控制可见区域整体运动ul作为"组合体"整体移动性能优化top属性translateY使用transform代替传统定位，避免页面重排性能更好GPU加速流畅度更高60fps动画实战案例4：呼吸轮播呼吸轮播也称“交叉淡入淡出轮播”，也是网页中常见的动画轮播形式，如图519所示。当点击左右按钮或者小圆点时，图片通过淡出、淡入的动画进行切换，如图520所示，初始图片是“故宫角楼”，点击右按钮时，“故宫角楼”图片淡出，下一张图片“鸟巢”淡入。淡出淡入如同呼吸，“呼吸轮播”因此得名。实战案例4：呼吸轮播交叉淡入淡出效果图片如同呼吸般平滑过渡，一张淡出同时另一张淡入实现原理01图片"摞在一起"使用绝对定位，所有图片重叠在同一位置02动画同时进行fadeIn()和fadeOut()并发执行03信号量控制idx标识当前显示的图片核心代码示例动画机制由于idx在中间发生了变化，两次操作的元素下标相差1，实现不同图片的淡入淡出切换varidx=0;//信号量改变前的操作$("li").eq(idx).fadeOut("fast");//信号量自增idx++;if(idx>4)idx=0;//信号量改变后的操作$("li").eq(idx).fadeIn("fast");实战案例5：无限循环缩略图呼吸轮播业务拆分思想大图部分呼吸轮播机制fadeInfadeOut图片叠加缩略图部分无穷滚动动画克隆队列瞬移复位两个独立信号量idx大图索引small_idx缩略图索引关键代码索引处理原理克隆后图片索引变为0-6和7-13，通过%7运算将索引统一映射到0-6，确保正确匹配大图$(".small_nav_unitli").mouseenter(function(){//旧图淡出$(".big_img_listli").eq(idx).stop().fadeOut();//关键：取余处理克隆图片索引idx=$(this).index()%7;//新图淡入$(".big_img_listli").eq(idx).stop().fadeIn();});实战案例5：无限循环缩略图呼吸轮播本节学习制作带有缩略图的呼吸轮播，如图6-21所示。在上节“呼吸轮播”基础上增加了缩略图。由于一共有7张图片参与轮播展示，而同时只有5张缩略图可见，所以给缩略图配置了左右按钮，用户可以点击左右按钮移动缩略图队列。缩略图队列是周而复始、无穷滚动的。实战案例5：无限循环缩略图呼吸轮播web特效五花八门，但是它们都有基本的“原理模型”：大图部分是呼吸轮播机制，所以7张大图要“摞在一起”；缩略图部分，为实现“周而复始”、“源源不断”的图片运动，所有缩略图要排成一行，形成“小火车”，还要克隆图片队列，使用之前学习的“无穷连续滚动动画”原理进行“运动”和“瞬间移动”动画。布局如图5-25所示。实战案例5：无限循环缩略图呼吸轮播实战案例6：拼图轮播马赛克式逐步出现图片以随机小方格形式逐步拼合，营造炫酷视觉效果实现原理01100个div盒子10×10网格拼合完整图片02背景定位差异background-position值各不相同03随机延迟淡入Math.random()控制出现时机函数节流锁防止用户快速点击造成动画混乱800毫秒后才能触发下一次切换动画机理是：使用100个div盒子当做“小方格”，每个div都有相同的背景图片（比如都是向日葵），但是background-position（背景定位）值不同，像“CSS精灵”技术一样，让它们可以巧妙拼合成一张完整的图片，如图5-29所示。实战案例6：拼图轮播实战案例7：异形滚动图片错落有致、彼此交叠突破传统布局限制，创造动态立体视觉效果实现方式6六个位置系统A、B、C、D、E、Z不同布局属性类名封装属性位置、宽高、透明度通过类名控制点击切换序列按钮触发类名重新分配关键点：倒序遍历避免类名冲突，确保每个元素正确继承前一个兄弟的类名实战案例7