理论第十一章理论.pptVIP

* * 第十一章 页面导航 回顾 show()、hide()和toggle()方法使元素以动画效果实现显示和隐藏，改变元素的宽度、高度和透明度属性。 fadeIn()、fadeOut()、fadeToggle()和fadeTo()方法使元素以动画效果实现淡入和淡出的效果，改变元素的透明度。 slideUp()、slideDown()和slideToggle()方法使元素以“卷窗帘”的动画效果实现显示和隐藏，改变元素的高度属性。 使用animate()方法自定义元素的动画效果，可以实现上述方法中全部属性改变的功能，同时，还可以用动画的效果，改变其他的元素属性。 stop()方法能够结束当前的动画，并立即进入到下一个动画。 理论内容 菜单导航 TreeView设计 普通下拉菜单 首先介绍一种最简单的下拉菜单形式的网站导航，下拉菜单是最常见的菜单模式，该模式主要用于展示整个网站的站点地图，效果如下图： 11.1 菜单导航 普通下拉菜单 当光标移到一级菜单如“招聘”上时，其二级菜单以滑入的效果显示，当光标从一级菜单移出时，其二级菜单以滑出的效果隐藏，效果如下图： 11.1 菜单导航 实现普通下拉菜单 （1）新建html页面，用div-ul-li的块状结构组织菜单内容，下级菜单采用在li中嵌套ul来实现。 11.1 菜单导航 div id=container !--顶级容器-- div id=menu ul class=first id=nav !--顶级菜单-- lia href=#首页/a/li lia href=#文化/a ul!--二级菜单-- lia href=#企业文化/a/li lia href=#企业精神/a/li lia href=#经营理念/a/li /ul /li ...... /ul /div!--菜单版块结束-- div id=content网页的主要内容/div /div /body 实现普通下拉菜单 （2）新建样式文件demo.css，在样式文件中添加样式规则，对页面进行美化。在html文件中，导入demo.css文件，在head/head标签中，添加下述代码： 11.1 菜单导航 link href=css/demo.css rel=stylesheet type=text/css / 实现普通下拉菜单 （3）使用jQuery框架，实现二级菜单的滑入滑出。新建demo.js脚本文件，在html文件中导入jQuery框架和demo.js文件，在demo.js文件中，需要利用jQuery的ready()函数来实现在页面加载完成后执行的特殊效果，代码如下： 11.1 菜单导航 script src=js/jquery-1.11.0.min.js/script script src=js/demo.js/script ...... $(function(){ $(#menuulli).hover(function(){ $(this).children(ul).stop().slideDown(fast); },function(){ // 鼠标移出一级菜单项，对应的二级菜单滑出隐藏 $(this).children(ul).stop().slideUp(fast); }); }); 鼠标移入到一级菜单项,对应的二级菜单滑入显示 下拉级联菜单 在原有下拉菜单的基础上添加第二级菜单的子菜单即三级菜单，三级菜单横向显示。此种下拉菜单的实现原理与上面的菜单类似：在上级菜单的光标移入和移出事件中设置下级菜单的滑入和滑出动画效果，效果如下图： 11.1 菜单导航 下拉级联菜单功能的实现在普通下拉菜单的基础上修改完成，步骤如下： （1）html页面中，在“个人求职”的菜单项li中嵌套ul，制作“个人求职”的下级菜单。 11.1 菜单导航 … lia href=#个人求职/a ul lia href=#java工程师/a/li lia href=#.net工程师/a/li /ul /li … （2）demo.css文件不需要修改。 （3）编辑demo.js文件，修改后的代码如下： 11.1 菜单导航 $(function(){ $(#menuulli).hover(function(){