使用JavaScriptjQuery实现页面特效第十章-实践.pptVIP

* 实践十 jQuery的动画与特效 实践目标 二级菜单特效 无缝滚动特效 制作美淘网二级菜单滑入滑出的动画效果。 （1）用户将光标移入到“我的美淘”菜单上时，其二级菜单滑入显示。 （2）当鼠标从“我的美淘”菜单移出时，其二级菜单滑出隐藏。 任务一：美淘网中二级菜单特效 （1）修改页眉页面head.html，在“我的美淘”的li标签中嵌套ulli，添加二级菜单项。 （2）添加样式规则，如二级菜单的定位方式、背景颜色和显示方式等。 （3）在head.html导入jQuery框架。 （4）在文档加载完成事件中，给“我的美淘”菜单的鼠标移入、移出事件绑定方法，实现二级菜单的滑入滑出动画效果。 任务一：美淘网中二级菜单特效 任务一：美淘网中二级菜单特效 li class=spacea href=#我的美淘/a ul lia href=#我的订单/a/li lia href=#我的收藏/a/li lia href=#我的余额/a/li /ul /li ...... div#menu li.space { position: relative; /*下级菜单的绝对定位以父容器左上角为参考点*/ cursor: hand; } ....... 导入jQuery框架后，在文档加载完成事件中，给“我的美淘”菜单的鼠标移入、移出事件绑定方法，代码如下： 任务一：美淘网中二级菜单特效 $(function(){ $(li.space:eq(0)).hover(function(){ $(li.space:eq(0) ul).stop().slideDown(500); },function(){ $(li.space:eq(0) ul).stop().slideUp(500); }); }); 制作美淘网“全部商品分类”的二级菜单滑入滑出的动画效果。当光标移入到一级菜单“全部商品分类”上时，其二级菜单以滑入的效果显示，效果如图所示。当光标从“全部商品分类”菜单移出时，其二级菜单滑出隐藏。 任务一：美淘网中二级菜单特效 在前期的课程中，虽然使用了css技术中的hover伪类实现了“全部商品分类”的二级菜单的显示隐藏，但是并没有呈现出一种动画效果，为了提升用户对页面的体验度，改用jQuery框架提供的slideDown()方法和slideUp()方法实现此功能。 获取二级菜单所对应的无序列表ul的jQuery代码：$(div#nav li.menuList ul:first)。 任务一：美淘网中二级菜单特效 利用自定义动画animate()，实现文本无缝垂直向上循环滚动特效。 （1）实现当当网中，“近7日畅销榜”中的图书无缝垂直向上滚动特效。 （2）当光标移入到图书上时，停止滚动，鼠标移开时，继续滚动。 任务二：无缝垂直向上循环滚动特效 （1）在新建html页面中，添加h3和无序列表，用无序列表显示六个畅销书籍的名称，html参考代码如下： 任务二：无缝垂直向上循环滚动特效 h3近7日畅销榜/h3 div id=book ul class=express li傲慢与偏见/li li玻璃鞋全集（50集34VCD）/li li澳大利亚：假日之旅/li li浪漫地中海：假日之旅/li li欧陆风情：假日之旅/li li社交疯狂项语/li /ul /div （2）添加css规则，重点设置无序列表的父版块div(id=“book”)的宽度和高度，使其只能显示前三个列表项，溢出的后三项使用overflow: hidden属性隐藏。 （3）在html文件中导入jQuery框架。 （4）在script/script标签中，声明函数movePrice()。 任务二：无缝垂直向上循环滚动特效 var stopScroll = false; var marginTop = 0; setInterval(function(){ if(stopScroll) return; $(.express).children(li).first().animate({margin-top:marginTop--},0,function(){ var $first=$(this); if(!$first.is(:animated)){//判断是否在动画状态 if((-marginTop)$first.height())