<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>推拉门式的菜单</title> <mce:style type="text/css"><!-- #mytext{ position: absolute; background-color:#0000ff; font-size:18pt; font-family:"隶书"; left: -100; top:100; width:110; height:80 } body{ font-size:9pt; margin:0pt } .myclass{ font-family:金山简行楷; font-size:12pt; background-color:blue; color:red; } --></mce:style><style type="text/css" mce_bogus="1">#mytext{ position: absolute; background-color:#0000ff; font-size:18pt; font-family:"隶书"; left: -100; top:100; width:110; height:80 } body{ font-size:9pt; margin:0pt } .myclass{ font-family:金山简行楷; font-size:12pt; background-color:blue; color:red; }</style> <mce:script language="javascript"><!-- //首先定义一个标记变量用于指明鼠标是否在菜单范围内 var isin; //赋初值false,指明不在菜单范围内 isin=false; //定义一个存放定时事件的变量 var timeid1; //定义处理移入菜单的函数 function opentext() { //首先把标记变量置为true isin=true; //调用实现平滑移出菜单的函数 stepopen(); } //定义平滑移出菜单的函数 function stepopen() { //定义存放菜单左边界的变量 var leftval; //取得菜单左边界 leftval=mytext.style.posLeft; //判断鼠标是否在菜单内并且左边界是否小于0 if(isin&&leftval<0) { //转换为纯整数 leftval=parseInt(leftval); //左边界的值加5 leftval+=5; //把菜单移动到新位置 mytext.style.posLeft=leftval; //设置定时事件,50号面后重新执行本函数 setTimeout("stepopen()",50); return; } else{ //否则直接返回 return; } } //定义处理鼠标移出菜单的函数 function closetext() { //首先把标记变量置为false isin=false; //调用实现平滑移入菜单的函数 stepclose(); } //定义实现平滑移入菜单的函数 function stepclose() { //定义存放菜单左边界的变量 var leftval; //取得菜单左边界 leftval=mytext.style.posLeft; //判断鼠标是否不在菜单内并且左边界是否大于-100 if((!isin)&&(leftval>-100)) { //转换为纯整数 leftval=parseInt(leftval); //左边界的值减5 leftval-=5; //把菜单移动到新位置 mytext.style.posLeft=leftval; //设置定时事件,50号面后重新执行本函数 setTimeout("stepclose()",50); return; } else{ //否则直接返回 return; } } //定义关闭本窗口的函数 function closewin() { //调用window对象的方法 window.close(); return; } // --></mce:script> </head> <body> <p align="center"> <font size="4" color="#ff0000" face="金山简行楷"> 注意 <br> 下面的推拉门式的菜单 </font> </p> <p align="center"> <form> <input class="myclass" type="button" value="我要走了!" οnclick="closewin()"> </form> </p> </body> <mce:script language=JavaScript><!-- //定义一个标记变量 var isie; //如果是IE浏览器 if(document.all) { //把标记变量置为true isie=true; } //如果不是IE浏览器 else{ //把标记变量置为false isie=false; } //判断标记变量是否为真值 if(isie) { //定义一个用于存放一段HTML代码的变量 var mystr; //给改变量赋值 mystr="<div id='mytext' align='center' οnmοuseοver='opentext()' οnmοuseοut='closetext()'>"; //把这段代码放到HTML文本中 document.write(mystr); //定义一个存放数组的变量 var theitems; //建立一个数组 theitems=new Array(); //定义另一个存放数组的变量 var theitemsvalue; //建立另一个数组 theitemsvalue=new Array(); //为两个数组的各项赋值 theitems[0]="南开大学"; theitems[1]="天津大学"; theitems[2]="清华大学"; theitems[3]="北京大学"; theitemsvalue[0]="http://www.nankai.edu.cn"; theitemsvalue[1]="http://www.tju.edu.cn"; theitemsvalue[2]="http://www.tsinghua.edu.cn"; theitemsvalue[3]="http://www.pku.edu.cn"; var i; //循环向HTML页面中添加如下代码 for(i=0;i<4;i++) { //通过document对象的write语句,写入HTML文件中四个超级连接 document.write("<a href="+theitemsvalue[i]+" mce_href="+theitemsvalue[i]+">"); document.write("<font color='#ff0000'>"); document.write(theitems[i]); document.write("</font>"); document.write("</a><br>"); } document.write("</div>"); //把该文本块的左边界移动到-100处 mytext.style.posLeft=-100; } else{ //否则显示相应的提示信息 alert("请使用IE浏览器浏览本页面!"); } // --></mce:script> </html>
扫一扫
151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
