ASP与数据库，有用的代码（转贴，摘贴） |
|
ASP与数据库 ASP与数据库运用：密码验证 Microsoft 的大作ASP(Active Server Pages)以其易学易用、扩充性好、功能多而强等优点正掀起一场新的web编程革命(从严格意义上讲，编写asp并不是编程)，它以令人吃惊的发展和普及速度大有取代由perl等语言编写的CGI(Common Gateway Interface,通用网关接口) 的势头 。基于web page方式的web管理模式已经成为潮流，看看现在的网管们，有谁不会asp的编写呢？要管理？那你可能就要用到我这里要说的“密码验证”了 。简单地说，密码验证就是首先判断你是不是有登录权限，如果有，就继续，否则，哼哼…… 。什么？你到现在还不知道ASP是什么东东？“该程序执行了非法操作，即将被关闭 。如仍有问题，请与程序供应商联系 。”----------系统语 下面，我们就来看看实现密码验证的ASP需要些什么吧 。 一、 ASP运行环境： Windows 95/98单机平台：PWS (Personal Web Server)4.0 、windows NT 4.0/5.0服务器平台：IIS(Internet Information Server )Service Pack 3 及其以上版本) NT workstation 4.0 工作站平台：PWS(Personal Web Server )NT workstation版及最新版的IE浏览器 。 二、 用于制作ASP的软件 Windows FrontPage 98/2000 、Dreamweaver 3.0 ，如果这些软件你都没有，那你就用windows 中的Notepad 当一次“代码编写狂”吧 。不过ASP中很多代码仍是需要我们手工编写大量代码的，用专用的网页制作软件只不过是偷一丁点懒而已 。 三、 用哪一种数据库作为储存用户资料(用户名及密码)的数据库呢？ SQL Server、Microsoft Access 97/2000等都可以 。本人建议你使用Access，因为你可能对它比较熟悉，一旦有问题，解决起来比较容易，更深的原因是：Microsoft Access相对于其它非服务器等级的数据库执行的效率要高得多 。 好了，废话说了这么多，可能你早已经不耐烦了 。不过，这对于一些ASP的初学者可能还是有帮助的，对于这部分读者，你们可能还得要看看关于ASP方面的书籍或网站来增加你对ASP基本语法的了解 。 让我们一步一步来做这个密码验证吧，我采用的是Windows 98 + PWS 4.0平台，IE 5.0浏览器，网页制作软件：FrontPage 2000. Go! 一、创建用户密码数据库 先用Access建立一个用户密码数据库，建立字段名id和psd,并添加值.如:id的值我设为：admin，psd的值为：www，当然，你还可以继续添加用户id及psd,完成后保存为：psd.mdb 。 二、编写psd.asp(用户登录界面页，完成验证的功臣就是它了)及log.asp(成功登录后显示的页面) 。在编写之前，我们来分析一下常见的用户登录界面，比如说你想收取基于web page方式免费邮件箱的登录界面：管理用户登录的文件名常常为log.*,开始登录时是这个文件，登录完成后浏览器的地址栏中还是显示的这个文件名，这是怎么回事儿呢？用ASP的方法来讲，原来，用户登录的文件被包含在登录完成后的文件中 。以我现在要讲的这个例子来说，psd.asp就是被包含在log.asp中了 。用户登录时看到的文件名将是：log.asp，而log.asp要求系统先执行psd.asp，通过验证之后才看到真正的log.asp网页 。对了！实际上密码验证的关键在psd.asp 。在你读完本文后，你会深深体会这一点 。既然psd.asp文件是关键，那我们就先来看看psd.asp是怎么写的 。 运行FrontPage新建一个文件，并保存为：psd.asp(在FrontPage 的保存类型中选取“Active Server Pages”) 。在FrontPage 左下角选取“HTML”先在它的顶部进行ASP源代码的编写，内容如下(以下源代码中凡出现“‘……”的均为注释)： <% function checkPwd(id,psd) 检测用户id及密码 dim conn,param,rs set conn=server.createobject("adodb.connection") 创建数据库连接对象conn param="driver={microsoft access driver (*.mdb)}" ‘指定数据库驱动程序，不可省略写为“access diver(*.mdb)” conn.open param & ";dbq=" & server.mappath("psd.mdb") 用指定的数据库驱动程序打开数据库，并指定数据路径 sql="select*from psd where id=" & id & " and psd=" & psd & "" ‘定义sql从数据库中读取id及psd的值,本行中的第一个psd是指数据库名，以后的psd是指psd.mdb中的psd字段 。 set rs=conn.execute(sql) 打开数据库 if rs.eof then checkpwd=false else checkpwd=true end if end function ‘以上几句判断是否已经读完数据库中的记录，如果没有，就向后读，如果已经完成，则验证用户名及密码 。如果验证通过，则为true,反之为flase %> <% if isEmpty(session("passed")) then session("passed")=false 判断用户输入信息 id=request("id") ‘获取用户id(用户名) psd=request("psd") ‘获取用户psd(密码) if id="" or psd="" then response.write"请输入您的登录名及密码 。" 如果用户没有输入完整的信息，返回出错信息 。 elseif not checkpwd(id,psd) then response.write"用户名或密码错误！<br>请检查你的用户名及密码然后再试一次！" ‘如果用户已经输入完整信息，但输入错误也返回出错信息 。 else session("passed")=true end if if not session("passed") then%> ‘用户输入的信息完全正确并验证通过，以下开始编写html代码，做一个用户登录界面 。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>请您输入您的用户名及密码！</title> </head> <body bgcolor="#000000" text="#FFFFFF"> <p align="center"> <p align="center"> </p> <p align="center"><b><font face="黑体" size="6">用户登录首页</font></b></p> <p align="center"> </p> <form method="POST" action="<%=request.serverVariables("psd.mdb")%>"> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td width="41%" align="right">用户名:</td> <td width="59%"><input type="text" name="id" size="20" value="<%=id%>"></td> </tr> <tr> <td width="41%" align="right"> 密 码：</td> <td width="59%"><input type="password" name="psd" size="20" value="<%=psd%>"></td> </tr> <tr> <td width="41%"> </td> <td width="59%"> </td> </tr> </table> <p align="center"><input type="submit" value="提交" name="B1"><input type="reset" value="清除" name="B1"></p> </form> <%response.end end if %> ‘验证过程结束，进入加密网页 。 </body> </html> 完成了psd.asp的编写，可能你早已经迫不及待地想知道log.asp怎么编写了吧 。让我们继续吧！ Log.asp的内容： <!--#include file="psd.asp"--> ‘在log.asp源代码中的顶部输入这句,作用就是在系统执行log.asp之前先执行psd.asp啦！ <html> <head> <title>用户验证通过，您已经成功登录系统</title> </head> <body><center><p><p><p><p>用户验证通过，您已经成功登录！<br> 现在你可以进行你想要的操作了 。如果你有什么问题，请来信Email<a href="mailto:kanwo@163.net?subject=问你几个关于密码验证的问题">kanwo@163.net</a></center> </body> </html> 呵呵……手写了这么多，还受得了吧 。你在编写完成之后，可以移植到其它平台上，比如Windows NT 。最后，将你做的这两个asp文件及psd.mdb数据库放在同一个目录下(该目录必须在PWS或IIS中有www服务)，比如:c:\inetpub\wwwroot\ 。然后，在确保你的PWS或IIS在运行的情况下，在你们IE浏览器的地址栏中输入http://127.0.0.1/log.asp，看看，会有什么！(如果你在登录过程中听到你的硬盘在响，可别吓着了哟！) q 文 章 点 评 3 篇 >>上篇文章:ASP技术访问WEB数据库 >>下篇文章:制作有管理功能的ASP留言板 第三招：控制你的弹出窗口只弹出一次（如果每进一次，刷新一次就弹出你不觉得很烦和麻烦吗？）有什么好的办法吗？ 那是当然的啊，我们现在只要使用cookie来控制就能实现这样的要求了 。 首先，你需把将如下代码加入到页面HTML的＜HEAD>和＜/HEAD>之间： ＜script＞ ．function openwin(){ ．window.open("pop1.html","","width=120,height=240") ．} ．function get_cookie(Name) { ．var search = Name + "=" ．var returnvalue = ""; ．if (document.cookie.length ＞ 0) { ．offset = document.cookie.indexOf(search) ．if (offset != -1) { ．offset += search.length ．end = document.cookie.indexOf(";", offset); ．if (end == -1) ．end = document.cookie.length; ．returnvalue=unescape(document.cookie.substring(offset, end)) ． } ． } ．return returnvalue; ． } ．function loadpopup(){ //*控制弹出窗口的函数哟，你要使用他的啊 ．if (get_cookie(popped)==){ ．openwin() ．document.cookie="popped=yes" ． } ．} ．//--＞ ＜/script> 然后，用＜body onload="loadpopup()">替换页面中原来的＜BODY>这一句就行的了 。 》》》》》》》》》》》》》》》》》》》》》》---------------------------------- 在提交帖之后: <% if Response.Cookies("time")<>"" then if DateDiff(s,Response.Cookies("time"),now())<20 隔20s才能再发帖 Response.Write "<script>alert(不能频繁发帖);window.location=history.go(-1)</script>" response.End end if end if Response.Cookies("time")=now() …… 将帖子入库 ---------------------------------------------------------- ASP项目中的公共翻页模块: 在大型的ASP项目中，很多的页面都涉及到翻页功能 。如果每个页面都写一个翻页的程序的话，这样的工作即降低了工作效率，也不利于工程的模块化，不能使代码重用 。因此，把翻页这样的功能模块化是很有必要的 。 设计方法： 1、调用该模块时，只需要传递记录集和每页显示的记录的条数； 2、可以点击链接进行翻页，也可以直接输入页码，回车后翻页； 3、不要考虑文件名，程序的每次翻页都能在当前页面 。 想清楚了上面3个问题，我们的公共翻页模块就可以动手了 。 <% +++++++++++++++++++++++++++++++++++++ ◆模块名称： 公共翻页模块 ◆文 件 名： TurnPage.asp ◆传入参数： Rs_tmp (记录集), PageSize (每页显示的记录条数) ◆输 出： 记录集翻页显示功能 +++++++++++++++++++++++++++++++++++++ Sub TurnPage(ByRef Rs_tmp,PageSize) Rs_tmp 记录集 PageSize 每页显示的记录条数; Dim TotalPage 总页数 Dim PageNo 当前显示的是第几页 Dim RecordCount 总记录条数 Rs_tmp.PageSize = PageSize RecordCount = Rs_tmp.RecordCount TotalPage = INT(RecordCount / PageSize * -1)*-1 PageNo = Request.QueryString ("PageNo") 直接输入页数跳转； If Request.Form("PageNo")<>"" Then PageNo = Request.Form("PageNo") 如果没有选择第几页，则默认显示第一页； If PageNo = "" then PageNo = 1 If RecordCount <> 0 then Rs_tmp.AbsolutePage = PageNo End If 获取当前文件名，使得每次翻页都在当前页面进行； Dim fileName,postion fileName = Request.ServerVariables("script_name") postion = InstrRev(fileName,"/")+1 取得当前的文件名称，使翻页的链接指向当前文件； fileName = Mid(fileName,postion) %> <table border=0 width=100%> <tr> <td align=left> 总页数：<font color=#ff3333><%=TotalPage%></font>页 当前第<font color=#ff3333><%=PageNo%></font>页</td> <td align="right"> <%If RecordCount = 0 or TotalPage = 1 Then Response.Write "首页|前页|后页|末页" Else%> <a href="<%=fileName%>?PageNo=1">首页|</a> <%If PageNo - 1 = 0 Then Response.Write "前页|" Else%> <a href="<%=fileName%>?PageNo=<%=PageNo-1%>">前页|</a> <%End If If PageNo+1 > TotalPage Then Response.Write "后页|" Else%> <a href="<%=fileName%>?PageNo=<%=PageNo+1%>">后页|</a> <%End If%> <a href="<%=fileName%>?PageNo=<%=TotalPage%>">末页</a> <%End If%></td> <td width=95>转到第 <%If TotalPage = 1 Then%> <input type=text name=PageNo size=3 readonly disabled style="background:#d3d3d3"> <%Else%> <input type=text name=PageNo size=3 value="" title=请输入页号,然后回车> <%End If%>页 </td> </tr> </table> <%End Sub%> 当然，大家可以把翻页的链接做成图片按钮，这样的话也面就更加美观了 。 调用方法: 1、在程序开始或要使用翻页的地方包含翻页模块文件； 2、定义变量：RowCount，每页显示的记录条数 3、调用翻页过程：Call TurnPage(记录集,RowCount) 4、在Do While 循环输出记录集的条件中加上" RowCount > 0 " 条件 5、在循环结束 "Loop前" 加上： RowCount = RowCount - 1 ----------------------------------------------------- 调用范例： 文件名：News.asp <% Dim Conn，Rs_News Set Conn = server.CreateObject("ADODB.CONNECTION") Conn.Open "cpm","cpm","cpm" Dim Sql Sql = "Select * from News" Set Rs_News = Server.CreateObject("ADODB.RECORDSET") Rs_News.Open Sql,Conn,1,3 获取的记录集 公共翻页模块开始%> <!--#include file=../Public/TurnPage.asp--> <% Dim RowCount RowCount = 10 每页显示的记录条数 Call TurnPage(Rs_News,RowCount) 公共翻页模块结束%> <table width=100%> <tr> <td>新闻编号</td> <td>新闻标题</td> <td>发布日期</td> <tr> <% If Not Rs_News.eof Do while Not Rs_News.eof and RowCount>0 %> <tr> <td><%=Rs_News("ID")%></td> <td><%=Rs_News("Name")%></td> <td><%=Rs_News("Date")%></td> <tr> <% RowCount = RowCount - 1 Rs_News.MoveNext Loop End If %> （出处：www.dev-club.com） -------------------------------------------------------------------- 在提交帖之后: <% if Response.Cookies("time")<>"" then if DateDiff(s,Response.Cookies("time"),now())<20 隔20s才能再发帖 Response.Write "<script>alert(不能频繁发帖);window.location=history.go(-1)</script>" response.End end if end if Response.Cookies("time")=now() …… 将帖子入库 --------------------------------- 怎样去除执行window.close()后弹出的‘是否关闭窗口对话框 self.opener=null; self.close(); 但是只能在IE5.5 或IE6.0上用 最小化、最大化、关闭窗口 <object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <param name="Command" value="Minimize"></object> <object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <param name="Command" value="Maximize"></object> <OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"> <PARAM NAME="Command" value="Close"></OBJECT> ------------------------------------------------------- 我的下拉框中又两个选项，当选择第一个时，出现一个用户输入页面，但是有一部分input框是不要用户填写的 。当选择第二项时，出现地页面是全部都要填写的 。不知道该如何实现？ <select onchange="text1.disabled=this.selectedIndex==0"> <option>False</option> <option>True</option> </select> <input type=text id=text1 disabled> ------------------------------------------------------------------>>>>>>>>>>>>>> 我的目的是:打开一个web页(就称为原页 吧)，点击一个按钮弹出一个小窗口(原页不关，小窗口最好可以拖动)，在小窗口里提交一个表单到原页 。有什么方法可以实现？ 给『原页』一个name属性，表单的target指向它 <script> this.name = "bencalie"; newwin = window.open("","","width=400,height=200"); newwin.document.write("<form action=test.cgi target=bencalie><input type=submit></form>"); </script> <<<<<<<<<<<<<<<<<<<<<<<============================================== 没有边框的窗口：：；；；； <HTML XMLNS:IE> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <IE:Download ID="include" STYLE="behavior:url(#default#download)" /> <title>Chromeless Window</title> <SCRIPT LANGUAGE="JScript"> /*--- Special Thanks For andot ---*/ /* This following code are designed and writen by Windy_sk <seasonx@163.net> You can use it freely, but u must held all the copyright items! */ /*--- Thanks For andot Again ---*/ var CW_width = 400; var CW_height = 300; var CW_top = 100; var CW_left = 100; var CW_url = "http://www.cnbruce.com/bluebook/"; var New_CW = window.createPopup(); var CW_Body = New_CW.document.body; var content = ""; var CSStext = "margin:1px;color:black; border:2px outset;border-style:expression(onmouseout=onmouseup=function(){this.style.borderStyle=outset}, onmousedown=function(){if(event.button!=2)this.style.borderStyle=inset});background-color:buttonface;width:16px;height:14px;font-size:12px;line-height:11px;cursor:Default;"; //Build Window include.startDownload(CW_url, function(source){content=source}); function insert_content(){ var temp = ""; CW_Body.style.overflow = "hidden"; CW_Body.style.backgroundColor = "white"; CW_Body.style.border = "solid black 1px"; content = content.replace(/<a ([^>]*)>/g,"<a onclick=parent.open(this.href);return false $1>"); temp += "<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>"; temp += "<tr style=;font-size:12px;background:#0099CC;height:20;cursor:default ondblclick=\"Max.innerText=Max.innerText==1?2:1;parent.if_max=!parent.if_max;parent.show_CW();\" onmouseup=parent.drag_up(event) onmousemove=parent.drag_move(event) onmousedown=parent.drag_down(event) onselectstart=return false oncontextmenu=return false>"; temp += "<td style=color:#ffffff;padding-left:5px>Chromeless Window For IE6 SP1</td>"; temp += "<td style=color:#ffffff;padding-right:5px; align=right>"; temp += "<span id=Help onclick=\"alert(Chromeless Window For IE6 SP1 - Ver 1.0\\n\\nCode By Windy_sk\\n\\nSpecial Thanks For andot)\" style=\""+CSStext+"font-family:System;padding-right:2px;\">?</span>"; temp += "<span id=Min onclick=parent.New_CW.hide();parent.blur() style=\""+CSStext+"font-family:Webdings;\" title=Minimum>0</span>"; temp += "<span id=Max onclick=\"this.innerText=this.innerText==1?2:1;parent.if_max=!parent.if_max;parent.show_CW();\" style=\""+CSStext+"font-family:Webdings;\" title=Maximum>1</span>"; temp += "<span id=Close onclick=parent.opener=null;parent.close() style=\""+CSStext+"font-family:System;padding-right:2px;\" title=Close>x</span>"; temp += "</td></tr><tr><td colspan=2>"; temp += "<div id=include style=overflow:scroll;overflow-x:hidden;overflow-y:auto; HEIGHT: 100%; width:"+CW_width+">"; temp += content; temp += "</div>"; temp += "</td></tr></table>"; CW_Body.innerHTML = temp; } setTimeout("insert_content()",1000); var if_max = true; function show_CW(){ window.moveTo(10000, 10000); if(if_max){ New_CW.show(CW_top, CW_left, CW_width, CW_height); if(typeof(New_CW.document.all.include)!="undefined"){ New_CW.document.all.include.style.width = CW_width; New_CW.document.all.Max.innerText = "1"; } }else{ New_CW.show(0, 0, screen.width, screen.height); New_CW.document.all.include.style.width = screen.width; } } window.onfocus = show_CW; window.onresize = show_CW; // Move Window var drag_x,drag_y,draging=false function drag_move(e){ if (draging){ New_CW.show(e.screenX-drag_x, e.screenY-drag_y, CW_width, CW_height); return false; } } function drag_down(e){ if(e.button==2)return; if(New_CW.document.body.offsetWidth==screen.width && New_CW.document.body.offsetHeight==screen.height)return; drag_x=e.clientX; drag_y=e.clientY; draging=true; e.srcElement.setCapture(); } function drag_up(e){ draging=false; e.srcElement.releaseCapture(); if(New_CW.document.body.offsetWidth==screen.width && New_CW.document.body.offsetHeight==screen.height) return; CW_top = e.screenX-drag_x; CW_left = e.screenY-drag_y; } </SCRIPT> </HTML> ============================================================>>>>>>>>>>>>>>>>>>>>> 还有图片的“黑白转彩色” <SCRIPT> function doTrans(filterCode) { imgObj.filters[0].apply(); oImg.style.filter = filterCode imgObj.filters[0].play(); } </SCRIPT> <SPAN id=imgObj onmouseleave=doTrans("gray") style="FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); WIDTH: 1px" onmouseenter=doTrans("")> <IMG id=oImg style="FILTER: gray" src="http://www.cnbruce.com/images/cnrose/a.gif"> </SPAN> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 模拟office菜单::: ::::::::::::: <style type="text/css"> * { font-size: 12px; } body { margin: 0px; } </style> <script language="JavaScript"> // Office XP 菜单 var sub_display = false; // 颜色数组说明：此数组储存菜单各部份颜色样式，可以改变颜色值达到改变样式的效果 // 值依次为：高亮背景色, 高亮边框色, 菜单栏背景色, 子菜单背景色, 子菜单边框色, 子菜单标题色, 子菜单阴影色 var color = [#B6BDD2, #0A246A, #D4D0C8, #F8F8F8, #666666, #DBD8D1, #DDDDDD]; // 菜单数组说明：此数组储存各菜单数据 // 值依次为： // 1. 主菜单名称, 下拉菜单右延空白长度 // 2. 第1个子菜单名称, 链接地址 // 3. 第2个子菜单名称, 链接地址 // 4. ...... var menu = new Array(); menu[0] = [[菜单一, 50], [1111, 1.htm], [2222, 2.htm], [3333, 3.htm]]; menu[1] = [[菜单二, 50], [1111, 1.htm], [2222, 2.htm], [3333, 3.htm]]; menu[2] = [[菜单三, 50], [1111, 1.htm], [2222, 2.htm], [3333, 3.htm]]; menu[3] = [[菜单四, 50], [1111, 1.htm], [2222, 2.htm], [3333, 3.htm]]; menu[4] = [[菜单五, 50], [1111, 1.htm], [2222, 2.htm], [3333, 3.htm]]; menu[5] = [[菜单六, 50], [1111, 1.htm], [2222, 2.htm], [3333, 3.htm]]; document.write(<table width="100%" cellspacing="0" cellpadding="0" style="background-color: + color[2] + ; border-left: 1px #F4F4F4 solid; border-top: 1px #F4F4F4 solid; border-right: 1px #999999 solid; border-bottom: 1px #999999 solid;" onSelectStart="return false;" onContextMenu="return false;"><tr><td width="5"><img width="5" height="1"></td><td><table cellspacing="0" cellpadding="2"><tr>); for (var i=0; i<menu.length; i++) document.write(<td style="border: 1px + color[2] + solid; cursor: default;" onClick="Menu_Click(this, + i + )" onMouseOver="Menu_Over(this, + i + )" onMouseOut="Menu_Out(this, + i + )"><nobr><img width="10" height="1"> + menu[i][0][0] + <img width="10" height="1"></nobr></td>); document.write(</td></tr></table></tr></table>); for (var i=0; i<menu.length; i++) { document.write(<table id="subMenu" cellspacing="0" cellpadding="0" onSelectStart="return false;" onContextMenu="return false;" style="position: absolute; display: none; top: 1px; border-left: 1px + color[4] + solid; border-bottom: 1px + color[4] + solid; cursor: default; filter:progid:dximagetransform.microsoft.dropshadow(color= + color[6] + ,offx=3,offy=3,positive=true)"><tr><td style="border-top: 1px + color[4] + solid; border-right: 1px + color[4] + solid; background-color: + color[5] + ;" onClick="subMenu_Hide(false)"><nobr><img width="1" height="2"><br><img width="12" height="1"> + menu[i][0][0] + <img width="12" height="1"><br><img width="1" height="3"></nobr></td><td style="border-bottom: 1px + color[4] + solid;" onMouseOver="subMenu_Hide(true)"><img width=" + menu[i][0][1] + " height="1"></td></tr><tr><td colspan="2" style="border-right: 1px + color[4] + solid; background-color: + color[3] + ;"><table width="100%" cellspacing="1" cellpadding="2" style=" background-color: + color[3] + ">); for (var j=1; j<menu[i].length; j++) document.write(<tr><td style="border: 1px + color[3] + solid;" onMouseOver="subMenu_Over(this)" onMouseOut="subMenu_Out(this)" onClick="location.href=\ + menu[i][j][1] + \"><nobr> + menu[i][j][0] + </nobr></td></tr>); document.write(</td></tr></table></td></tr></table>); } function Menu_Over(obj, s) { if (sub_display) { subMenu_Show(obj, s) } else { obj.style.backgroundColor = color[0]; obj.style.border = 1px + color[1] + solid; } } function Menu_Out(obj) { obj.style.backgroundColor = ; obj.style.border = 1px + color[2] + solid; } function Menu_Click(obj, s) { subMenu_Show(obj, s) } function subMenu_Over(obj) { obj.style.backgroundColor = color[0]; obj.style.border = 1px + color[1] + solid; } function subMenu_Out(obj) { obj.style.backgroundColor = ; obj.style.border = 1px + color[3] + solid; } function subMenu_Hide(hide) { for (var i=0; i<subMenu.length; i++) subMenu[i].style.display = none; sub_display = hide; } function subMenu_Show(obj, s) { subMenu_Hide(false); subMenu(s).style.posLeft = obj.offsetLeft + 6; subMenu(s).style.display = ; sub_display = true; } window.onfocus = subMenu_Hide; </script> =-=======================-----------------======================================== 模仿OUTLOOK的菜单: <head> <style type="text/css"> .titleStyle{ background-color:#3366cc;color:#ffffff;border-top:1px solid #FFFFFF;font-size:9pt;cursor:hand; } .contentStyle{ background-color:#efefef;color:blue;font-size:9pt; } a{ color:blue; } body{ font-size:9pt; } </style> </head> <body> <script language="JavaScript"> <!-- var layerTop=20; //菜单顶边距 var layerLeft=30; //菜单左边距 var layerWidth=140; //菜单总宽 var titleHeight=20; //标题栏高度 var contentHeight=200; //内容区高度 var stepNo=10; //移动步数，数值越大移动越慢 var itemNo=0;runtimes=0; document.write(<span id=itemsLayer style="position:absolute;overflow:hidden;border:1px solid #efefef;left:+layerLeft+;top:+layerTop+;width:+layerWidth+;">); function addItem(itemTitle,itemContent){ itemHTML=<div id=item+itemNo+ itemIndex=+itemNo+ style="position:relative;left:0;top:+(-contentHeight*itemNo)+;width:+layerWidth+;"><table width=100% cellspacing="0" cellpadding="0">+ <tr><td height=+titleHeight+ onclick=changeItem(+itemNo+) class="titleStyle" align=center>+itemTitle+</td></tr>+ <tr><td height=+contentHeight+ class="contentStyle">+itemContent+</td></tr></table></div>; document.write(itemHTML); itemNo++; } //添加菜单标题和内容，可任意多项，注意格式： addItem(欢迎,<BR> WWW.CNBRUCE.COM); addItem(网页专区,<center><a href="#">网页工具</a> <BR><BR><a href="#">技术平台</a> <BR><BR><a href="#">设计理念</a> <BR><BR><a href="#">更多</a></center>); addItem(美工教室,<center><a href="#">平面设计 </a> <BR><BR><a href="#">三维空间</a> <BR><BR><a href="#">设计基础</a> <BR><BR><a href="#">更多..</a></center>); addItem(Flash,<center><a href="#">基础教程</a> <BR><BR><a href="#">技巧运用</a> <BR><BR><a href="#">实例剖析</a> <BR><BR><a href="#">更多..</a></center>); addItem(多媒体,<center><a href="#">DIRECTOR</a> <BR><BR><a href="#">Authorware</a> <BR><BR><a href="#">更多..</a></center>); addItem(精品赏析,<center><a href="#">设计精品</a></center>); document.write(</span>) document.all.itemsLayer.style.height=itemNo*titleHeight+contentHeight; toItemIndex=itemNo-1;onItemIndex=itemNo-1; function changeItem(clickItemIndex){ toItemIndex=clickItemIndex; if(toItemIndex-onItemIndex>0) moveUp(); else moveDown(); runtimes++; if(runtimes>=stepNo){ onItemIndex=toItemIndex; runtimes=0;} else setTimeout("changeItem(toItemIndex)",10); } function moveUp(){ for(i=onItemIndex+1;i<=toItemIndex;i++) eval(document.all.item+i+.style.top=parseInt(document.all.item+i+.style.top)-contentHeight/stepNo;); } function moveDown(){ for(i=onItemIndex;i>toItemIndex;i--) eval(document.all.item+i+.style.top=parseInt(document.all.item+i+.style.top)+contentHeight/stepNo;); } changeItem(0); //--> </script> </body> |
