JavaScript程序的设计（第2版）04.在网页中加入菜单.pptVIP

在网页中加入菜单; 例13-5 在网站中不仅可以设置导航条，而且还可以设置导航菜单。由于菜单内容比较多，在同一页面中显示会比较杂乱，所以目前大多的设计者都采用了收缩式的导航菜单。 本实例主要是利用显示隐藏表格来实现收缩式导航菜单的功能。单击导航超级链接，显示当前菜单的内容，隐藏上一个显示的菜单，在隐藏菜单时，让其有规律的隐藏进而实现动画的效果。 （1）显示菜单的自定义函数，代码如下。;（3）单击菜单上的文字超链接时，隐藏前一个菜单，显示当前菜单，代码如下。;例13-6 自动隐藏式菜单简洁易用，在不使用时能自动隐藏，保持页面的清洁，着实为网页增添了不少亮丽的光彩。 本实例主要利用显示隐藏表格的功能来实现收缩式导航菜单的功能。当鼠标指向“自动隐藏式菜单”表格时，显示当前菜单的内容；当鼠标移出该表格时，隐藏该菜单，从而实现动画效果。 （1）编写实现自动隐藏菜单的JavaScript代码，该代码主要实现控制隐藏菜单的显示和隐藏坐标点，代码如下。;（2）利用数组设置自动隐藏菜单的文字属性和链接地址，并调用Javascript脚本编写自定义函数，实现菜单的自动隐藏和弹出，代码如下。;document.body.scrollLeft+eventX-menuobj.contentwidth+menuOffX : netscape6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth else menuobj.thestyle.left=IE4? IE_x(event.srcElement)+menuOffX : netscape6? window.pageXOffset+eventX : eventX if (bottomedgemenuobj.contentheightmod!=0) menuobj.thestyle.top=IE4? document.body.scrollTop+eventY-menuobj.contentheight-event.offsetY+menuOffY-23 : netscape6? window.pageYOffset+eventY-menuobj.contentheight-10 : eventY-menuobj.contentheight else menuobj.thestyle.top=IE4? IE_y(event.srcElement)+menuOffY : netscape6? window.pageYOffset+eventY+10 : eventY menuobj.thestyle.visibility=visible IE_dropshadow(menuobj,#999999,3) return false } function IE_y(e){ var t=e.offsetTop; while(e=e.offsetParent){ t+=e.offsetTop; } return t; } function IE_x(e){ var l=e.offsetLeft; while(e=e.offsetParent){ l+=e.offsetLeft; } return l; } function IE_dropshadow(el, color, size) { var i; for (i=size; i0; i--){ var rect = document.createElement(div); var rs = rect.style rs.position = absolute; rs.left = (el.style.posLeft + i) + px; rs.top = (el.style.posTop + i) + px; rs.width = el.offsetWidth + px; rs.height = el.offsetHeight + px; rs.zIndex = el.style.zIndex - i; rs.backgroundColor = color; var opacity = 1 - i / (i + 1); rs.filter = alpha(opacity= + (100 * opacity) + ); fo_shadows[fo_shadows.length] = rect; } } function IE_clearshadow(){;for(var i=0;ifo_shadows.length;i++){