JavaScript实用技巧与高级应用.ppt

晴天电子课件2011年下学期,湖南理工职业技术学院信息工程系,JavaScript实用技巧与高级应用,（本部分内容分四次讲授）,晴天电子课件2011年下学期,湖南理工职业技术学院信息工程系,第十三讲JavaScript实用技巧与高级应用（一）,晴天电子课件2011年下学期,湖南理工职业技术学院信息工程系,第十三讲JavaScript实用技巧与高级应用（一）,1建立函数库在网页设计与制作过程中，往往会重复地应用一些JavaScript函数，一般应将这些常用的函数存储在一个外置的独立的JavaScript文件中，作为网页制作的JavaScript函数库。应用时，直接调用函数库文件即可。函数库中的函数一般可分为下面6种类型：,晴天电子课件2011年下学期,湖南理工职业技术学院信息工程系,第十三讲JavaScript实用技巧与高级应用（一）,用于简化程序的函数用于校验用户输入的函数用于取值与设置值的函数用于字符串处理的函数用于列表处理的函数用于网页元素显示的函数例：许愿墙网页,晴天电子课件2011年下学期,湖南理工职业技术学院信息工程系,第十四讲JavaScript实用技巧与高级应用（二）,晴天电子课件2011年下学期,湖南理工职业技术学院信息工程系,第十四讲JavaScript实用技巧与高级应用（二）,4树状导航菜单和收缩式导航菜单树状导航菜单效果展现例：li11-树状导航菜单.html,晴天电子课件2011年下学期,湖南理工职业技术学院信息工程系,第十四讲JavaScript实用技巧与高级应用（二）,程序设计思路页面布局：用层（CSS+DIV）布局。菜单的展开和隐藏：用层的显示和隐藏属性程序设计要点单击一级菜单，调用函数w(vd)如：onClick=w(gc)“单击二级菜单，调用函数k(vd)如：onClick=k(fgc91)“程序的实现分析源程序,晴天电子课件2011年下学期,湖南理工职业技术学院信息工程系,第十四讲JavaScript实用技巧与高级应用（二）,收缩式导航菜单效果展现例：li11-收缩式导航菜单.html,晴天电子课件2011年下学期,湖南理工职业技术学院信息工程系,第十四讲JavaScript实用技巧与高级应用（二）,程序设计思路页面布局：用层（CSS+DIV）布局。菜单的展开和隐藏：用层的显示和隐藏属性展开菜单的同时收缩其他菜单：先收缩所有菜单，再展开当前菜单。程序设计要点单击一级菜单，调用函数spreadMenu(n)如：onClick=javascript:spreadMenu(1)单击二级菜单，调用函数spreadSubMenu(k)如：onClick=javascript:spreadSubMenu(1)程序的实现分析源程序,晴天电子课件2011年下学期,湖南理工职业技术学院信息工程系,第十五讲JavaScript实用技巧与高级应用（三）,晴天电子课件2011年下学期,湖南理工职业技术学院信息工程系,第十五讲JavaScript实用技巧与高级应用（三）,5下拉菜单效果展现例：鸿博图书馆管理系统的半透明背景下拉菜单,晴天电子课件2011年下学期,湖南理工职业技术学院信息工程系,第十五讲JavaScript实用技巧与高级应用（三）,设计思路导航链接（主菜单）的制作：用表格布局，相应菜单项上添加事件。子菜单（6个）的制作：用表格布局，6个子菜单对应6个表格。将6个表格对应的HTML代码串存在6个变量中。子菜单的显示/隐藏的实现：创建一个层，利用层的可见性属性来实现。当要显示某子菜单时，将该子菜单放入层中，并设置显示层；当要隐藏已显示的子菜单时，设置隐藏层。设置层（子菜单）的位置：一般情况下，层在对应主菜单项的下方，并左对齐。考虑特殊情况。（难点）,晴天电子课件2011年下学期,湖南理工职业技术学院信息工程系,第十五讲JavaScript实用技巧与高级应用（三）,什么情况下要隐藏子菜单：当鼠标移到主菜单与子菜单所形成的区域外时要隐藏子菜单。（难点）子菜单外观的设置：边框、半透明效果、阴影、菜单项的动态效果。考虑用户所使用的浏览器的类型和版本：IE4.0及以上版本、NetscapeNavigator4、NetscapeNavigator4,晴天电子课件2011年下学期,湖南理工职业技术学院信息工程系,第十五讲JavaScript实用技巧与高级应用（三）,设计步骤及程序实现在页面中加入导航链接（主菜单）：用表格布局，相应菜单项上添加事件。在页面中加入一个div层：设置id=popmenu，引用CSS样式class=menuskin，添加事件。在CSS样式表文件中加入menuskin类选择符，设置层的边框、背景、半透明效果、可见性等属性。创建一个单独的.js文件，编写实现下拉菜单的JavaScript代码。该代码中主要包括以下函数：,晴天电子课件2011年下学期,湖南理工职业技术学院信息工程系,第十五讲JavaScript实用技巧与高级应用（三）,显示及定位层（子菜单）的函数：showmenu()求主菜单的x方向上位置的函数：IE_x()求主菜单的y方向上位置的函数：IE_y()隐藏层的函数：hidemenu()延迟隐藏层的函数：delayhidemenu()清除延迟隐藏层的函数：clearhidemenu()动态隐藏层的函数：dynamichide()设置菜单背景的函数：overbg()、outbg设置层阴影的函数：IE_dropshadow清除层阴影的函数：IE_clearshadow(),晴天电子课件2011年下学期,湖南理工职业技术学院信息工程系,第十五讲JavaScript实用技巧与高级应用（三）,关键知识点HTML元素的属性innerHTML属性：页面中某个元素标签内部的值。例如：menuobj.innerHTML=vmenuoffsetwidth属性:元素相对父元素的偏移宽度。等于border+padding+width例如：menuobj.offsetWidthoffsetHeight属性:元素相对父元素的偏移宽度。等于border+padding+width例如：menuobj.offsetHeight,晴天电子课件2011年下学期,湖南理工职业技术学院信息工程系,第十五讲JavaScript实用技巧与高级应用（三）,clientWidth属性：元素内容的宽度，不计算任何边距、边框、滚动条，但包括该对象的补白。例如：document.body.clientWidth：表示body元素所定义的矩形区域的宽度clientHeight属性：元素内容的高度，不计算任何边距、边框、滚动条，但包括该对象的补白。例如：document.body.clientHeight：表示body元素所定义的矩形区域的高度scrollLeft属性：元素中内容的最左边与当前显示内容最左边之间的距离。例如：document.body.scrollLeft,晴天电子课件2011年下学期,湖南理工职业技术学院信息工程系,第十五讲JavaScript实用技巧与高级应用（三）,scrollTop属性：元素中内容的最顶端与当前显示内容最顶端之间的距离。例如：document.body.scrollTopoffsetLeft属性：元素相对于页面（或由offsetParent属性指定的父元素）左侧的距离。offsetTop属性：元素相对于页面（或由offsetParent属性指定的父元素）顶端的距离。,晴天电子课件2011年下学期,湖南理工职业技术学院信息工程系,第十五讲JavaScript实用技巧与高级应用（三）,event对象的属性event.clientX：光标相对于窗口