js特效

40个网页小技巧 
 
  
 1.如何控制横向和纵向滚动条的显隐?
<body style="overflow-y:hidden"> 去掉x轴滚动条
<body style="overflow-x:hidden"> 去掉y轴滚动条
<body scroll="no">不显
 
2.表格变色
<TD onmouseover="this.style.backgroundColor='#FFFFFF'"
 onmouseout="this.style.backgroundColor=''" style="CURSOR: hand"> 
 
 3.禁止复制,鼠标拖动选取
<body ondragstart=window.event.returnValue=false oncontextmenu=window.event.returnValue=false
 onselectstart=event.returnValue=false> 
 
 4.iframe的使用
<iframe  src="a.htm" width="50" height="50"  frameborder="0"></iframe>
 
 5.在收藏夹及IE地址栏中显示出你的图标
<link rel="Shortcut Icon" href="favicon.ico">
 <link rel="Bookmark" href="favicon.ico">
 
 6.字号缩放
 越来越多的人长时间的泡网,眼镜的普及率也越来越高,让文字大点,让更多的用户看的更清楚。
<script type="text/javascript">
 function doZoom(size)
 {document.getElementById('zoom').style.fontSize=size+'px';}
 </script>
 <span id="zoom">需要指定大小的文字</span>
 <a href="javascript:doZoom(16)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a>
 
 7.select挡住div的解决方法 
在div里加入下面的代码,根据需要调整就可以了。
<iframe src="javascript:false" scrolling="no" frameborder="0" style="z-index:-1;position:absolute; top:5px; left:2px;168;height:100px;">
 </iframe>
 
 8.跳转菜单新窗口
<select name="select" onchange="window.open(this.options[this.selectedIndex].value)">
 <option value=" http://www.lihao.name "> lihao</option>
 <option value=" http://www.nai8.com "> nai8</option>
 <option value=" http://www.akbk.net "> akbk</option>
 </select> 
 
 9.flash透明选项
<param name="wmode" value="transparent"> 
 
 10.显示网页的最后更新时间 
 <script language=JavaScript> 
 document.write("最后更新时间: " + document.lastModified + "") 
 </script> 
 
 11.添加到收藏夹和设为首页
<a href=# onclick="this.style.behavior='url(#default#homepage)';this.setHomePage(' http://www.lihao.name /');">设为首页</a>
 
 <a href="javascript:window.external.AddFavorite(' http://www.lihao.name /','李好博客)">收藏本站</a>
 
图片设置方法:
 <IMG SRC="lihao.gif" BORDER="0" ALT="设置为首页" onclick="this.style.behavior='url(#default#homepage)';this.sethomepage(' http://www.lihao.name ');return false;" style="cursor:hand"> 
 
 <IMG SRC="bb.gif" BORDER="0" ALT="收藏此页面" onclick="window.external.addFavorite(' http://www.lihao.name ','李好博客')" style="cursor:hand">
 
 
 
 12.加入背景音乐
<bgsound src="mid/windblue[1].mid" loop="-1"> 只适用于IE
 <embed src="music.mid" autostart="true" loop="true" hidden="true"> 对Netscape ,IE 都适用
 
13.滚动
<marquee direction=up height=146 onmouseout=start() onmouseover=stop() scrollAmount=2>滚动信息</marquee> 
 
 14.跳转页面代码
<meta http-equiv="refresh" content="5;url=http://www.lihao.name">
 
 15. flash按钮加链接 
on (press) {
 getURL(" http://www.lihao.name ","_blank");
 }  
 
 16.文字或图片弹出指定大小的窗口
 在body中加入
<script language="JavaScript" type="text/JavaScript">
 function MM_openBrWindow(theURL,winName,features) {window.open(theURL,winName,features);}
 </script>
弹出代码
<a href="#" target="_self" onClick="MM_openBrWindow('windows01.htm','','width=550,height=380')" width="550" height="380" border="0">图片或文字</a>
 
 17. 细分隔线
<hr noshade size=0 color=#C0C0C0> 
 
 18.网页中的自动换行
<td style="word-break:break-all">
完整的是:
style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word"
 
 19. 消除ie6自动出现的图像工具栏,设置 GALLERYIMG属性为false或no . 
 <IMG SRC="mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="no"> 
 
 20. 不能点右键,不用CTRL+A,不能复制作!
 <body oncontextmenu="window.event.returnValue=false"
 onkeypress="window.event.returnValue=false"
 onkeydown="window.event.returnValue=false"
 onkeyup="window.event.returnValue=false"
 ondragstart="window.event.returnValue=false"
 onselectstart="event.returnValue=false"> 
 </body> 
 
 21.IE浏览器支持一个 Body 属性 bgproperties,它可以让背景不滚动: 
 <Body Background="图片文件" bgproperties="fixed"> 
 
 22.随机变换背景图象(一个可以刷新心情的特效) 
 <Script Language="JavaScript"> 
  image = new Array(4); //定义image为图片数量的数组 
  image [0] = 'tu0.gif' //背景图象的路径 
  image [1] = 'tu1.gif' 
  image [2] = 'tu2.gif' 
  image [3] = 'tu3.gif' 
  image [4] = 'tu4.gif' 
  number = Math.floor(Math.random() * image.length); 
  document.write("<BODY BACKGROUND="+image[number]+">"); 
 </Script> 
 
 23.flash载入影片 
on (release)
 {
 loadMovie("1-01.swf", "_root.loaderclip");
 } 
 
 24. 图片表单按钮
<form id="form1" name="form1" method="post" action="">
 <img src="login.gif" width="62" height="22" onclick="document.form1.submit()" />
 </form> 
 
 25.左右阴影背景的CSS定义方法body {
 text-align:center;
 background-repeat: repeat-y;
 background-position: center;
 background-image: url(../images/bg.jpg);
 } 
 
 26.划过链接 手型鼠标
style="cursor:hand" 
 
 27.关闭窗口的脚本
<a href=javascript:close()>[关闭窗口]</a> 
 
 28. 如果文字过长,则将过长的部分变成省略号显示 
 <DIV STYLE=" 120px; height: 50px; border: 1px solid blue;overflow: hidden; text-overflow:ellipsis"> 
 <NOBR>就是比如有一行文字,很长,表格内一行显示不下.</NOBR> 
 </DIV> 
 
  29. 进入主页后自动最大化
<script> 
 self.moveTo(0,0) 
 self.resizeTo(screen.availWidth,screen.availHeight) 
 </script> 
 
  30. 凹陷文字 
 <div style="300px;padding:20px;overflow:hidden;word-wrap:break-word;word-break:break:all; font-size:12px; line-height:18px; background-color:#eeeeee;">
 <font disabled>
怎么样,我凹下去了吧?<br>
你不想试试吗?<br>
 <a href=" http://www.lenvo.cn/ ">www.lenvo.cn</a></font>
 </div> 
 
  31. 运行代码框<script>
 function Preview()
 {var TestWin=open('');
 TestWin.document.write(code.value);}
 </script>
 <textarea id=code cols=60 rows=15></textarea>
 <br>
 <button onclick=Preview() >运行</button> 
 
  32. 给表格做链接 
 <table width="100%" onclick="window.open(' http://www.makewing.com/ ', '_blank')" style="CURSOR:hand">
 <tr>
 <td height="100" bgcolor="f4f4f4"> </td>
 </tr>
 </table>
 
 
  33. 让弹出窗口总是在最上面
<body onblur="this.focus();"> 
 
  34. CSS文字阴影 
 .shadowfont{FILTER: dropshadow(color=#666666, offx=1, offy=1, positive=1); FONT-FAMILY: "宋体"; FONT-SIZE: 9pt;COLOR: #ffffff;} 
 
 35.  后退&关闭窗口
 后退:javascript:history.back(1)
关闭:javascript:window.close(); 
 
  36. 表格透明 
style="FILTER: alpha(opacity=72)"
 
  37. 如何避免别人把你的网页放在框架中 
 <script language=“javascript”><!--if (self!=top){top.location=self.location;} -->< /script> 
 
  38. Alt和Title的区别 
alt 用来给图片来提示的。Title用来给链接文字或普通文字提示的。
 
<a href="#" Title="给链接文字提示">文字</a>
 <p Title="给链接文字提示">文字</p>
 
 <img src="图片链接" alt="给图片提示">
 
 
39.  所有的javascript的调用尽量采取外部调用 
 <SCRIPT LANGUAGE="javascript" SRC="js/xxxxx.js"></SCRIPT> 
 
 40. 链接到
response.redirect"login.asp"
 location.href="xx.asp"
 onClick="window.location='login.asp'"
 onClick="window.open('')"
 
  
  
  
  
下拉菜单二 
 
<html>
 <head>
 <title>下拉菜单二</title>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 </head>
  
<body bgcolor="#FFFFFF" text="#000000">
 <SCRIPT LANGUAGE="JavaScript">
  
<!-- Begin
 var isDOM = false, isNS4 = false;
 if (document.all) var isDOM = true, docObj = 'document.all.', styObj = '.style';
 else if (document.layers) var isNS4 = true, docObj = 'document.', styObj = '';
 // Hide timeout
 var popTimer = 0;
 var litNow = new Array();
 function popOver(menuNum, itemNum) {
 clearTimeout(popTimer);
 hideAllBut(menuNum);
 litNow = getTree(menuNum, itemNum);
 changeCol(litNow, true);
 targetNum = menu[menuNum][itemNum].target;
 if (targetNum > 0) {
 targetName = menu[targetNum][0].id;
 menuName = menu[menuNum][0].id;
 menuRef = eval(docObj + menuName + styObj);
 thisX = parseInt(menuRef.left);
 thisY = parseInt(menuRef.top);
 // Add onto this the position of the trigger item within the menu
 itemPath = docObj;
 if (isNS4) itemPath += menuName + '.document.';
 itemRef = eval(itemPath + menuName + itemNum.toString() + styObj);
 thisX += parseInt(itemRef.left);
 thisY += parseInt(itemRef.top);
 // Add those to the target's offset to set the target's position, show it.
 with (eval(docObj + targetName + styObj)) {
 left = parseInt(thisX + menu[targetNum][0].x);
 top = parseInt(thisY + menu[targetNum][0].y);
 visibility = 'visible';
 }
 }
 }
 function popOut(menuNum, itemNum) {
 // Hide menu in 1/2 sec, *UNLESS* another mouseover clears the timeout!
 popTimer = setTimeout('hideAllBut(0)', 500);
 }
 function getTree(menuNum, itemNum) {
 // Array index is the menu number. The contents are null (if that menu is not a parent)
 // or the item number in that menu that is an ancestor (to light it up).
 itemArray = new Array(menu.length);
 while(1) {
 itemArray[menuNum] = itemNum;
 if (menuNum == 0) return itemArray;
 itemNum = menu[menuNum][0].parentItem;
 menuNum = menu[menuNum][0].parentMenu;
 }
 }
 // Pass an array and a boolean to specify colour change, true = over colour.
 function changeCol(changeArray, isOver) {
 for (menuCount = 0; menuCount < changeArray.length; menuCount++) {
 if (changeArray[menuCount]) {
 thisMenu = menu[menuCount][0].id;
 thisItem = thisMenu + changeArray[menuCount].toString();
 newCol = isOver ? menu[menuCount][0].overCol : menu[menuCount][0].backCol;
 if (isDOM) document.all[thisItem].style.backgroundColor = newCol;
 if (isNS4) document[thisMenu].document[thisItem].bgColor = newCol;
 }
 }
 }
 function hideAllBut(menuNum) {
 var keepMenus = getTree(menuNum, 1);
 for (count = 0; count < menu.length; count++)
 if (!keepMenus[count])
 eval(docObj + menu[count][0].id + styObj + '.visibility = "hidden"');
 changeCol(litNow, false);
 }
 // *** MENU CONSTRUCTION FUNCTIONS ***
 // Variable to end a div or layer based on browser.
 var endDL = isDOM ? '</div>' : '</layer>';
 function Menu(id, x, y, width, overCol, backCol, borderCol) {
 this.id = id;
 this.x = x;
 this.y = y;
 this.width = width;
 // Colours of menu and items.
 this.overCol = overCol;
 this.backCol = backCol;
 this.borderCol = borderCol;
 // Parent menu and item numbers, indexed later.
 this.parentMenu = null;
 this.parentItem = null;
 }
 function Item(text, href, height, target) {
 this.text = text;
 this.href = href;
 this.height = height;
 this.target = target;
 }
 function startDL(id, x, y, width, height, vis, back, border, zIndex, extraProps) {
 // Write a div in IE that resembles a layer's settings, or a layer in NS.
 if (isDOM) {
 str = '<div id="' + id + '" style="position: absolute; left: ' + x + '; top: ' + y +
 ';  ' + width + '; height: ' + height + '; visibility: ' + vis + '; ';
 if (back) str += 'background: ' + back + '; ';
 if (border) str += 'padding: 3px; border: 1px solid ' + border + '; ';
 if (zIndex) str += 'z-index: ' + zIndex + '; ';
 // End style declaration.
 str += '" ';
 }
 if (isNS4) {
 str = '<layer id="' + id + '" left="' + x + '" top="' + y + '" width="' + width +
 '" height="' + height + '" visibility="' + vis + '" ';
 if (back) str += 'bgcolor="' + back + '" ';
 if (border) str += 'style="border: 1px solid ' + border + '" ';
 if (zIndex) str += 'z-index="' + zIndex + '" ';
 }
 return str + extraProps + '>';
 }
 function mouseProps(currMenu, currItem) {
 return 'onMouseOver="popOver(' + currMenu + ',' + currItem + ')" onMouseOut="popOut(' + currMenu + ',' + currItem + ')"';
 }
 function writeMenus(customRoot, popInd) {
 for (currMenu = 0; currMenu < menu.length; currMenu++) {
 showMenu = true;
 if ((currMenu == 0) && customRoot) {
 document.write(customRoot);
 showMenu = false;
 }
 with (menu[currMenu][0]) {
 // Start generating a div with position offset - no dimensions, colours, mouseovers.
 // This position is only relevant for root menu anyway as all others are altered later.
 menuHTML = startDL(id, x, y, 0, 0, 'hidden', null, null, 100, '');
 // Width is less padding (3 left & right) and border (1 left & right).
 var back = backCol, bord = borderCol, currWidth = width - 8;
 }
 // Y-position of next item, increase if you want a menu header.
 itemPos = 0;
 // Remember, items start from 1 in the array (0 is menu object itself, above).
 for (currItem = 1; currItem < menu[currMenu].length; currItem++) {
 // Auto-generate ID's in numerical sequence.
 trigID = menu[currMenu][0].id + currItem.toString();
 // Now, work with properties of individual menu items.
 with (menu[currMenu][currItem]) {
 // Start a menu item positioned vertically, with mouse events and colours.
 menuHTML += startDL(trigID, 0, itemPos, 0, 0, 'inherit', back, bord, 100, mouseProps(currMenu, currItem)) + '<table width="' + currWidth + '" border="0" cellspacing="0" cellpadding="0"><tr>' + '<td align="left"><a class="Item" href="' + href + '">' + text + '</a></td>' + '<td class="Item" align="right">' + (target ? popInd : '') + '</td></tr></table>' + endDL;
 if (target > 0) {
 // Set target's parents to this and offset it by the current position.
 menu[target][0].parentMenu = currMenu;
 menu[target][0].parentItem = currItem;
 }
 // Move next item position down by this item's height.
 itemPos += height;
 }
 }
 // Write this menu to the document.
 if (showMenu) document.write(menuHTML + endDL);
 litNow[currMenu] = null;
 }
 }
 //  End -->
 </script>
 <style>
 <!--
.Item { text-decoration: none; color: #FFFFFF; font: 12px Arial, Helvetica }
-->
 </style>
 <SCRIPT LANGUAGE="JavaScript">
 <!-- Begin
 var menu = new Array();
 // Default colours passed to most menu constructors (just passed to functions, not
 // a global variable - makes things easier to change later).
 var defOver = '#336699', defBack = '#003366', defBorder = '#000000';
 // Default height of menu items - the spacing to the next item, actually.
 var defHeight = 22;
 // Menu 0 is the special, 'root' menu from which everything else arises.
 menu[0] = new Array();
 // Pass a few different colours, as an example.
 menu[0][0] = new Menu('rootMenu', 0, 0, 80, '#669999', '#006666', defBorder);
 // Notice how the targets are all set to nonzero values...
 menu[0][1] = new Item('File', '#', defHeight, 1);
 menu[0][2] = new Item('Edit', '#', defHeight, 2);
 menu[0][3] = new Item('Help', '#', defHeight, 3);
 menu[1] = new Array();
 // The File menu is positioned 0px across and 22 down from its trigger, and is 80 wide.
 menu[1][0] = new Menu('fileMenu', 0, 22, 80, defOver, defBack, defBorder);
 menu[1][1] = new Item('Open(新浪)', '<a href="http://www.sina.com.cn" target="_blank">http://www.sina.com.cn</a>', defHeight, 0);
 menu[1][2] = new Item('Save-无链接', '#', defHeight, 0);
 // Non-zero target means this will trigger a popup.
 menu[1][3] = new Item('Reopen', '#', defHeight, 4);
 menu[1][4] = new Item('Exit', '#', defHeight, 0);
 menu[2] = new Array();
 menu[2][0] = new Menu('editMenu', 0, 22, 80, defOver, defBack, defBorder);
 menu[2][1] = new Item('Cut', '#', defHeight, 0);
 menu[2][2] = new Item('Copy', '<a href="http://www.sina.com.cn" target="_blank">http://www.sina.com.cn</a>', defHeight, 0);
 menu[2][3] = new Item('Paste', '#', defHeight, 0);
 menu[3] = new Array();
 menu[3][0] = new Menu('helpMenu', 0, 22, 80, defOver, defBack, defBorder);
 menu[3][1] = new Item('Contents', '#', defHeight, 0);
 menu[3][2] = new Item('Index', '#', defHeight, 0);
 menu[3][3] = new Item('About', '#', defHeight, 5);
 menu[4] = new Array();
 // This is across but not down... a horizontal popout (with crazy colours :)...
 menu[4][0] = new Menu('reopenMenu', 85, 0, 100, '#333366', '#666699', '#663399');
 menu[4][1] = new Item('Recent Doc 1:<br>Schedule', '#', 36, 0);
 menu[4][2] = new Item('Recent Doc 2:<br>Plan', '#', 40, 0);
 menu[4][3] = new Item('Etc. etc...', '#', defHeight, 0);
 menu[5] = new Array();
 // Leftwards popout with a negative x relative to its trigger.
 menu[5][0] = new Menu('aboutMenu', -85, -15, 80, defOver, defBack, defBorder);
 menu[5][1] = new Item('Leftwards!<br>And up!', '#', 30, 0);
  
newRoot = startDL('rootMenu', 0, 0, '100%', 17, 'hidden', '#006666', null, 100, '');
 newRoot += startDL('rootMenu1', 5, 0, 40, 17, 'inherit', '#006666', null, 100, mouseProps(0, 1));
 newRoot += '<span class="Item">  File</span>' + endDL;
 newRoot += startDL('rootMenu2', 55, 0, 40, 17, 'inherit', '#006666', null, 100, mouseProps(0, 2));
 newRoot += '<span class="Item">  Edit</span>' + endDL;
 newRoot += startDL('rootMenu3', 105, 0, 40, 17, 'inherit', '#006666', null, 100, mouseProps(0, 3));
 newRoot += '<span class="Item">  Help</span>' + endDL;
 newRoot += endDL;
 // Pass this two strings - the first is HTML to write a custom root menu, or null to
 // generate one normally. The second is the popout indicator HTML - try an image...?
 // Try writeMenus(null, '<img src="...">'); in your own script.
 writeMenus(newRoot, '>');
 // This is a quick snippet that captures all clicks on the document and hides the menus
 // every time you click. Use if you want.
 if (isNS4) document.captureEvents(Event.CLICK);
 document.onclick = clickHandle;
 function clickHandle(evt) {
 if (isNS4) document.routeEvent(evt);
 hideAllBut(0);
 }
 // Show root menu command - place in an onLoad="..." type function if you want.
 eval(docObj + menu[0][0].id + styObj + '.visibility = "visible"');
 // This is just the moving command for the example.
 function moveRoot() {
 rM = eval(docObj + menu[0][0].id + styObj);
 if (parseInt(rM.top) < 40) rM.top = 40;
 else rM.top = 0;
 }
 //  End -->
 </script>
 </body>
 </html>
  
  
  
  
  
下拉菜单效果一 
 
  
  
<html>
 <head>
 <title>下拉菜单效果一</title>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 </head>
  
<body bgcolor="#FFFFFF" text="#000000">
 <script language=javascript>
  
var mmenus    = new Array();
 var misShow   = new Boolean(); 
misShow=false;
 var misdown   = new Boolean();
 misdown=false;
 var mnumberofsub=0;
 var musestatus=false;
 var mpopTimer = 0;
 mmenucolor='Menu';
 mfontcolor='MenuText';
 mmenuoutcolor='#B5BED6';
 mmenuincolor='#B5BED6';
 mmenuoutbordercolor='#000000';
 mmenuinbordercolor='#000000';
 mmidoutcolor='#8D8A85';
 mmidincolor='#8D8A85';
 mmenuovercolor='MenuText';
 mitemedge='1';
 msubedge='0';
 mmenuunitwidth=100;
 mmenuitemwidth=110;
 mmenuheight=25;
 mmenuwidth='100%';
 mmenuadjust=0;
 mmenuadjustV=0;
 mfonts='font-family: 宋体; font-size: 9pt; color: MenuText; ';mcursor='default';
  
  
  
function stoperror(){
 return true;
 }
  
window.onerror=stoperror;
  
function mpopOut() {
 mpopTimer = setTimeout('mallhide()', 500);
 }
  
function getReal(el, type, value) {
 temp = el;
 while ((temp != null) && (temp.tagName != "BODY")) {
 if (eval("temp." + type) == value) {
 el = temp;
 return el;
 }
 temp = temp.parentElement;
 }
 return el;
 }
  
  
  
function mMenuRegister(menu) 
{
 mmenus[mmenus.length] = menu
 return (mmenus.length - 1)
 }
  
function mMenuItem(caption,command,target,isline,statustxt,level,img,sizex,sizey,pos){
 this.items = new Array();
 this.caption=caption;
 this.command=command;
 this.target=target;
 this.isline=isline;
 this.statustxt=statustxt;
 if(level!=null){mnumberofsub++;
 this.hasc=mnumberofsub;}
 this.level=level;
 this.img=img;
 this.sizex=sizex;
 this.sizey=sizey;
 this.pos=pos;
 }
  
function mMenu(caption,command,target,img,sizex,sizey,pos){
 this.items = new Array();
 this.caption=caption;
 this.command=command;
 this.target=target;
 this.img=img;
 this.sizex=sizex;
 this.sizey=sizey;
 this.pos=pos;
 this.id=mMenuRegister(this);
 }
 function mMenuAddItem(item)
 {
 this.items[this.items.length] = item
 item.parent = this.id;
 this.children=true;
 }
  
mMenu.prototype.addItem = mMenuAddItem;
 mMenuItem.prototype.addsubItem = mMenuAddItem;
  
function mtoout(src){
  
src.style.borderLeftColor=mmenuoutbordercolor;
 src.style.borderRightColor=mmenuinbordercolor;
 src.style.borderTopColor=mmenuoutbordercolor;
 src.style.borderBottomColor=mmenuinbordercolor;
 src.style.backgroundColor=mmenuoutcolor;
 src.style.color=mmenuovercolor;
 }
 function mtoin(src){
  
src.style.borderLeftColor=mmenuinbordercolor;
 src.style.borderRightColor=mmenuoutbordercolor;
 src.style.borderTopColor=mmenuinbordercolor;
 src.style.borderBottomColor=mmenuoutbordercolor;
 src.style.backgroundColor=mmenuincolor;
 src.style.color=mmenuovercolor;
 }
 function mnochange(src){
 src.style.borderLeftColor=mmenucolor;
 src.style.borderRightColor=mmenucolor;
 src.style.borderTopColor=mmenucolor;
 src.style.borderBottomColor=mmenucolor;
 src.style.backgroundColor='';
 src.style.color=mfontcolor;
  
}
 function mallhide(){
 for(var nummenu=0;nummenu<mmenus.length;nummenu++){
 var themenu=document.all['mMenu'+nummenu]
 var themenudiv=document.all['mmenudiv'+nummenu]
 mnochange(themenu);
 mmenuhide(themenudiv);
 }
 for(nummenu=1;nummenu<=mnumberofsub;nummenu++){  
var thesub=document.all['msubmenudiv'+nummenu]      
msubmenuhide(thesub);
 mnochange(document.all['mp'+nummenu]);
 document.all["mitem"+nummenu].style.color=mfontcolor;
 }
 }
 function mmenuhide(menuid){
  
menuid.style.visibility='hidden';
 misShow=false;
 }
 function msubmenuhide(menuid){
  
menuid.style.visibility='hidden';
 }
 function mmenushow(menuid,pid){
  
menuid.style.left=mposflag.offsetLeft+pid.offsetLeft+mmenuadjust;menuid.style.top=mposflag.offsetTop+mmenutable.offsetHeight+mmenuadjustV;
 if(mmenuitemwidth+parseInt(menuid.style.left)>document.body.clientWidth+document.body.scrollLeft)
 menuid.style.left=document.body.clientWidth+document.body.scrollLeft-mmenuitemwidth;
 menuid.style.visibility='visible';
 misShow=true;
 }
 function mshowsubmenu(menuid,pid,rid){
  
menuid.style.left=pid.offsetWidth+rid.offsetLeft;
  
menuid.style.top=pid.offsetTop+rid.offsetTop-3;
 if(mmenuitemwidth+parseInt(menuid.style.left)>document.body.clientWidth+document.body.scrollLeft)
 menuid.style.left=document.body.clientWidth+document.body.scrollLeft-mmenuitemwidth;
 menuid.style.visibility='visible';
 }
 function mmenu_over(menuid,x){
 toel = getReal(window.event.toElement, "className", "coolButton");
 fromel = getReal(window.event.fromElement, "className", "coolButton");
 if (toel == fromel) return;
 if(x==5){
 misShow = false;
 mallhide();
 mtoout(eval("mMenu"+x));
 }else{
 if(!misShow){mtoout(eval("mMenu"+x));}else{
 mallhide();
 mtoin(eval("mMenu"+x));
 mmenushow(menuid,eval("mMenu"+x));
 }
 }
 clearTimeout(mpopTimer);
 }
 function mmenu_out(x){
 toel = getReal(window.event.toElement, "className", "coolButton");
 fromel = getReal(window.event.fromElement, "className", "coolButton");
 if (toel == fromel) return;
 if (misShow){
 mtoin(eval("mMenu"+x));
 }else{
 mnochange(eval("mMenu"+x));
 }
 mpopOut()
 }
 function mmenu_down(menuid,x){
 if(misShow){
 mmenuhide(menuid);
 mtoout(eval("mMenu"+x));
 }
 else{
 mtoin(eval("mMenu"+x));
 mmenushow(menuid,eval("mMenu"+x));
 misdown=true;
 }
 }
 function mmenu_up(){
 misdown=false;
 }
 function mmenuitem_over(menuid,item,x,j,i){
 toel = getReal(window.event.toElement, "className", "coolButton");
 fromel = getReal(window.event.fromElement, "className", "coolButton");
 if (toel == fromel) return;
 srcel = getReal(window.event.srcElement, "className", "coolButton");
 for(nummenu=1;nummenu<=mnumberofsub;nummenu++){  
var thesub=document.all['msubmenudiv'+nummenu] 
if(!(menuid==thesub||menuid.style.tag>=thesub.style.tag)){
 msubmenuhide(thesub);
 mnochange(document.all['mp'+nummenu]);
 document.all["mitem"+nummenu].style.color=mfontcolor;
 }
 }
 if(item)document.all["mitem"+item].style.color=mmenuovercolor;
 if(misdown||item){
 mtoin(srcel);
 }
 else{
 mtoout(srcel);
 }
 if(x==-1)mthestatus=eval("msub"+j).items[i].statustxt;
 if(j==-1)mthestatus=mmenus[x].items[i].statustxt;
 if(mthestatus!=""){
 musestatus=true;
 window.status=mthestatus;
 }
 clearTimeout(mpopTimer);
 }
 function mmenuitem_out(hassub){
 toel = getReal(window.event.toElement, "className", "coolButton");
 fromel = getReal(window.event.fromElement, "className", "coolButton");
 if (toel == fromel) return;
 srcel = getReal(window.event.srcElement, "className", "coolButton");
 if(!hassub)mnochange(srcel);
 if(musestatus)window.status="";
 mpopOut()
 }
 function mmenuitem_down(){
 srcel = getReal(window.event.srcElement, "className", "coolButton");
 mtoin(srcel)
 misdown=true;
 }
 function mmenuitem_up(){
 srcel = getReal(window.event.srcElement, "className", "coolButton");
 mtoout(srcel)
 misdown=false;
 }
 function mexec3(j,i){
 var cmd;
 if(eval("msub"+j).items[i].target=="blank"){
 cmd = "window.open('"+eval("msub"+j).items[i].command+"')";
 }else{
 cmd = eval("msub"+j).items[i].target+".location=""+eval("msub"+j).items[i].command+""";
 }
 eval(cmd);
 }
 function mexec2(x){
 var cmd;
 if(mmenus[x].target=="blank"){
 cmd = "window.open('"+mmenus[x].command+"')";
 }else{
 cmd = mmenus[x].target+".location=""+mmenus[x].command+""";
 }
 eval(cmd);
 }
 function mexec(x,i){
 var cmd;
 if(mmenus[x].items[i].target=="blank"){
 cmd = "window.open('"+mmenus[x].items[i].command+"')";
 }else{
 cmd = mmenus[x].items[i].target+".location=""+mmenus[x].items[i].command+""";
 }
 eval(cmd);
 }
 function mbody_click(){
  
if (misShow){
 srcel = getReal(window.event.srcElement, "className", "coolButton");
 for(var x=0;x<=mmenus.length;x++){
 if(srcel.id=="mMenu"+x)
 return;
 }
 for(x=1;x<=mnumberofsub;x++){
 if(srcel.id=="mp"+x)
 return;
 }
 mallhide();
 }
 }
 document.onclick=mbody_click;
  
function mwritetodocument(){
 var mwb=1;
 var stringx='<div id="mposflag" style="position:absolute;"></div><table id=mmenutable border=0 cellpadding=3 cellspacing=2 width='+mmenuwidth+' height='+mmenuheight+' bgcolor='+mmenucolor+
 ' onselectstart="event.returnValue=false"'+
 ' style="cursor:'+mcursor+';'+mfonts+
 ' border-left: '+mwb+'px solid '+mmenuoutbordercolor+';'+
 ' border-right: '+mwb+'px solid '+mmenuinbordercolor+'; '+
 'border-top: '+mwb+'px solid '+mmenuoutbordercolor+'; '+
 'border-bottom: '+mwb+'px solid '+mmenuinbordercolor+'; padding:0px"><tr>'
 for(var x=0;x<mmenus.length;x++){
 var thismenu=mmenus[x];
 var imgsize="";
 if(thismenu.sizex!="0"||thismenu.sizey!="0")imgsize=" width="+thismenu.sizex+" height="+thismenu.sizey;
 var ifspace="";
 if(thismenu.caption!="")ifspace=" ";
 stringx += "<td nowrap class=coolButton id=mMenu"+x+" style='border: "+mitemedge+"px solid "+mmenucolor+
 "' width="+mmenuunitwidth+"px onmouseover=mmenu_over(mmenudiv"+x+
 //"' onmouseover=mmenu_over(mmenudiv"+x+
 ","+x+") onmouseout=mmenu_out("+x+
 ") onmousedown=mmenu_down(mmenudiv"+x+","+x+")";
 if(thismenu.command!=""){
 stringx += " onmouseup=mmenu_up();mexec2("+x+");";
 }else{
 stringx += " onmouseup=mmenu_up()";
 }
 if(thismenu.pos=="0"){
 stringx += " align=center><img align=absmiddle src='"+thismenu.img+"'"+imgsize+">"+ifspace+thismenu.caption+"</td>";      
}else if(thismenu.pos=="1"){
 stringx += " align=center>"+thismenu.caption+ifspace+"<img align=absmiddle src='"+thismenu.img+"'"+imgsize+"></td>";       
}else if(thismenu.pos=="2"){
 stringx += " align=center background='"+thismenu.img+"'> "+thismenu.caption+" </td>";       
}else{
 stringx += " align=center> "+thismenu.caption+" </td>";
 }
 stringx += "";
 }
 stringx+="<td width=*> </td></tr></table>";
 
 
 for(var x=0;x<mmenus.length;x++){
 thismenu=mmenus[x];
 if(x==5){
 stringx+='<div id=mmenudiv'+x+' style="visiable:none"></div>';
 }else{
 stringx+='<div id=mmenudiv'+x+
 ' style="cursor:'+mcursor+';position:absolute;'+
 ''+mmenuitemwidth+'px; z-index:'+(x+100);
 if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){
 stringx+=';border-left: 1px solid '+mmidoutcolor+
 ';border-top: 1px solid '+mmidoutcolor;}
 stringx+=';border-right: 1px solid '+mmenuinbordercolor+
 ';border-bottom: 1px solid '+mmenuinbordercolor+';visibility:hidden" onselectstart="event.returnValue=false">
'+
 '<table  width="100%" border="0" height="100%" align="center" cellpadding="0" cellspacing="2" '+
 'style="'+mfonts+' border-left: 1px solid '+mmenuoutbordercolor;
 if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){
 stringx+=';border-right: 1px solid '+mmidincolor+
 ';border-bottom: 1px solid '+mmidincolor;}
 stringx+=';border-top: 1px solid '+mmenuoutbordercolor+
 ';padding: 4px" bgcolor='+mmenucolor+'>
'
 for(var i=0;i<thismenu.items.length;i++){
 var thismenuitem=thismenu.items[i];
 var imgsize="";
 if(thismenuitem.sizex!="0"||thismenuitem.sizey!="0")imgsize=" width="+thismenuitem.sizex+" height="+thismenuitem.sizey;
 var ifspace="";
 if(thismenu.caption!="")ifspace=" ";
 if(thismenuitem.hasc!=null){
 stringx += "<tr><td id=mp"+thismenuitem.hasc+" class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+
 "' width=100% onmouseout=mmenuitem_out(true) onmouseover="mmenuitem_over(mmenudiv"+x+
 ",'"+thismenuitem.hasc+"',"+x+",-1,"+i+");mshowsubmenu(msubmenudiv"+thismenuitem.hasc+",mp"+thismenuitem.hasc+",mmenudiv"+x+");""+
 "><table id=mitem"+thismenuitem.hasc+" cellspacing='0' cellpadding='0' border='0' width='100%' style='"+mfonts+"'><tr><td ";
 if(thismenuitem.pos=="0"){
 stringx += "><img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+">"+ifspace+thismenuitem.caption+"</td><td";   
}else if(thismenuitem.pos=="1"){
 stringx += ">"+thismenuitem.caption+ifspace+"<img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+"></td><td";
 }else if(thismenuitem.pos=="2"){
 stringx += "background='"+thismenuitem.img+"'>"+thismenuitem.caption+"</td><td background='"+thismenuitem.img+"'";  
}else{
 stringx += ">"+thismenuitem.caption+"</td><td";
 }
 stringx += " align=right width='1'><font face='Webdings' style='font-size: 6pt'>4</font></td></tr></table></td></tr>
";                              
}else if(!thismenuitem.isline){
 stringx += "<tr><td class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+
 "' width=100% height=15px onmouseover="mmenuitem_over(mmenudiv"+x+
 ",false,"+x+",-1,"+i+");" onmouseout=mmenuitem_out() onmousedown=mmenuitem_down() onmouseup=";
 stringx += "mmenuitem_up();mexec("+x+","+i+"); ";
 if(thismenuitem.pos=="0"){
 stringx += "><img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+">"+ifspace+thismenuitem.caption+"</td></tr>";       
}else if(thismenuitem.pos=="1"){
 stringx += ">"+thismenuitem.caption+ifspace+"<img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+"></td></tr>";       
}else if(thismenuitem.pos=="2"){
 stringx += "background='"+thismenuitem.img+"'>"+thismenuitem.caption+"</td></tr>";  
}else{
 stringx += ">"+thismenuitem.caption+"</td></tr>";
 }
 }else{
 stringx+='<tr><td height="1" background="hr.gif" onmousemove="clearTimeout(mpopTimer);"><img height="1" width="1" src="none.gif" border="0"></td></tr>
';
 }
 }stringx+='</table>
</div>'
 }                         
}
 
 for(var j=1;j<=mnumberofsub;j++){     
thisitem=eval("msub"+j);
 stringx+='<div id=msubmenudiv'+j+
 ' style="tag:'+thisitem.level+';cursor:'+mcursor+';position:absolute;'+
 ''+mmenuitemwidth+'px; z-index:'+(j+200);
 if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){
 stringx+=';border-left: 1px solid '+mmidoutcolor+
 ';border-top: 1px solid '+mmidoutcolor;}
 stringx+=';border-right: 1px solid '+mmenuinbordercolor+
 ';border-bottom: 1px solid '+mmenuinbordercolor+';visibility:hidden" onselectstart="event.returnValue=false">
'+
 '<table  width="100%" border="0" height="100%" align="center" cellpadding="0" cellspacing="2" '+
 'style="'+mfonts+' border-left: 1px solid '+mmenuoutbordercolor;
 if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){
 stringx+=';border-right: 1px solid '+mmidincolor+
 ';border-bottom: 1px solid '+mmidincolor;}
 stringx+=';border-top: 1px solid '+mmenuoutbordercolor+
 ';padding: 4px" bgcolor='+mmenucolor+'>
'
 for(var i=0;i<thisitem.items.length;i++){
 var thismenuitem=thisitem.items[i];
 var imgsize="";
 if(thismenuitem.sizex!="0"||thismenuitem.sizey!="0")imgsize=" width="+thismenuitem.sizex+" height="+thismenuitem.sizey;
 var ifspace="";
 if(thismenu.caption!="")ifspace=" ";
 if(thismenuitem.hasc!=null){
 stringx += "<tr><td id=mp"+thismenuitem.hasc+" class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+
 "' width=100% onmouseout=mmenuitem_out(true) onmouseover="mmenuitem_over(msubmenudiv"+j+
 ",'"+thismenuitem.hasc+"',-1,"+j+","+i+");mshowsubmenu(msubmenudiv"+thismenuitem.hasc+",mp"+thismenuitem.hasc+",msubmenudiv"+j+");""+
 "><table id=mitem"+thismenuitem.hasc+" cellspacing='0' cellpadding='0' border='0' width='100%' style='"+mfonts+"'><tr><td ";
 if(thismenuitem.pos=="0"){
 stringx += "><img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+">"+ifspace+thismenuitem.caption+"</td><td";   
}else if(thismenuitem.pos=="1"){
 stringx += ">"+thismenuitem.caption+ifspace+"<img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+"></td><td";
 }else if(thismenuitem.pos=="2"){
 stringx += "background='"+thismenuitem.img+"'>"+thismenuitem.caption+"</td><td background='"+thismenuitem.img+"'";  
}else{
 stringx += ">"+thismenuitem.caption+"</td><td";
 }
 stringx += " align=right width='1'><font face='Webdings' style='font-size: 6pt'>4</font></td></tr></table></td></tr>
";                              
}else if(!thismenuitem.isline){
 stringx += "<tr><td class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+
 "' width=100% height=15px onmouseover="mmenuitem_over(msubmenudiv"+j+
 ",false,-1,"+j+","+i+");" onmouseout=mmenuitem_out() onmousedown=mmenuitem_down() onmouseup=";
 stringx += "mmenuitem_up();mexec3("+j+","+i+"); ";
 if(thismenuitem.pos=="0"){
 stringx += "><img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+">"+ifspace+thismenuitem.caption+"</td></tr>";       
}else if(thismenuitem.pos=="1"){
 stringx += ">"+thismenuitem.caption+ifspace+"<img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+"></td></tr>";       
}else if(thismenuitem.pos=="2"){
 stringx += "background='"+thismenuitem.img+"'>"+thismenuitem.caption+"</td></tr>";  
}else{
 stringx += ">"+thismenuitem.caption+"</td></tr>";
 }
 }else{
 stringx+='<tr><td height="1" background="hr.gif" onmousemove="clearTimeout(mpopTimer);"><img height="1" width="1" src="none.gif" border="0"></td></tr>
';
 }
 }
 stringx+='</table>
</div>'
 }
 document.write("<div align='left'>"+stringx+"</div>");
 }
  
  
  
mpmenu=new mMenu('主菜单一','','self','','','','');
 mpmenu.addItem(new mMenuItem('主菜单一1','/index.asp','self',false,'说明文字',null,'','','',''));
 mpmenu.addItem(new mMenuItem('主菜单一2','/index.asp','self',false,'说明文字',null,'','','',''));
 mpmenu.addItem(new mMenuItem('主菜单一3','/index.asp','self',false,'说明文字',null,'','','',''));
  
mpmenu2=new mMenu('页元素','','self','','','','');
 msub1=new mMenuItem('设计文档','','self',false,'','1','','','','');
 msub1.addsubItem(new mMenuItem('设计文章','/notebook.asp','self',false,'说明文字',null,'','','',''));
 msub1.addsubItem(new mMenuItem('书籍下载','/notebook.asp','self',false,'说明文字',null,'','','',''));
 mpmenu2.addItem(msub1);
 msub2=new mMenuItem('网页特效','','self',false,'','1','','','','');
 msub2.addsubItem(new mMenuItem('网页特效1','/js.asp','self',false,'说明文字',null,'','','',''));
 msub2.addsubItem(new mMenuItem('网页特效2','/js.asp','self',false,'说明文字',null,'','','',''));
 msub2.addsubItem(new mMenuItem('网页特效3','/js.asp','self',false,'说明文字',null,'','','',''));
 msub2.addsubItem(new mMenuItem('网页特效4','/js.asp','self',false,'说明文字',null,'','','',''));
 msub2.addsubItem(new mMenuItem('网页特效5','/js.asp','self',false,'说明文字',null,'','','',''));
 mpmenu2.addItem(msub2);
 mpmenu2.addItem(new mMenuItem('精品收藏','/gallery.asp','self',false,'说明文字',null,'','','',''));
 mpmenu2.addItem(new mMenuItem('软件下载','/download.asp','self',false,'说明文字',null,'','','',''));
 mpmenu2.addItem(new mMenuItem('酷站推荐','/web.asp','self',false,'说明文字',null,'','','',''));
 mpmenu2.addItem(new mMenuItem('元素论坛','/forum/index.asp','self',false,'说明文字',null,'','','',''));
  
mpmenu=new mMenu('主菜单三','','self','','','','');
 mpmenu.addItem(new mMenuItem('主菜单三1','/index.asp','self',false,'说明文字',null,'','','',''));
 mpmenu.addItem(new mMenuItem('主菜单三2','/index.asp','self',false,'说明文字',null,'','','',''));
 mpmenu.addItem(new mMenuItem('主菜单三3','/index.asp','self',false,'说明文字',null,'','','',''));
 mpmenu.addItem(new mMenuItem('主菜单三4','/index.asp','self',false,'说明文字',null,'','','',''));
 mpmenu.addItem(new mMenuItem('主菜单三5','/index.asp','self',false,'说明文字',null,'','','',''));
  
mpmenu=new mMenu('主菜单四','','self','','','','');
 mpmenu.addItem(new mMenuItem('主菜单四1','/index.asp','self',false,'说明文字',null,'','','',''));
 mpmenu.addItem(new mMenuItem('主菜单四2','/index.asp','self',false,'说明文字',null,'','','',''));
 mpmenu.addItem(new mMenuItem('主菜单四3','/index.asp','self',false,'说明文字',null,'','','',''));
 mpmenu.addItem(new mMenuItem('主菜单四4','/index.asp','self',false,'说明文字',null,'','','',''));
 mpmenu.addItem(new mMenuItem('主菜单四5','/index.asp','self',false,'说明文字',null,'','','',''));
  
mpmenu=new mMenu('主菜单五','','self','','','','');
 msub3=new mMenuItem('主菜单五1','','self',false,'','1','','','','');
 msub3.addsubItem(new mMenuItem('主菜单五1-a','/index.asp','self',false,'说明文字',null,'','','',''));
 msub3.addsubItem(new mMenuItem('主菜单五1-b','/index.asp','self',false,'说明文字',null,'','','',''));
 msub3.addsubItem(new mMenuItem('主菜单五1-c','/index.asp','self',false,'说明文字',null,'','','',''));
 mpmenu.addItem(msub3);
 msub4=new mMenuItem('主菜单五2','','self',false,'','1','','','','');
 msub4.addsubItem(new mMenuItem('主菜单五2-a','/index.asp','self',false,'说明文字',null,'','','',''));
 msub4.addsubItem(new mMenuItem('主菜单五2-b','/index.asp','self',false,'说明文字',null,'','','',''));
 msub4.addsubItem(new mMenuItem('主菜单五2-c','/index.asp','self',false,'说明文字',null,'','','',''));
 mpmenu.addItem(msub4);
 msub5=new mMenuItem('主菜单五3','','self',false,'','1','','','','');
 msub5.addsubItem(new mMenuItem('主菜单五3-a','/index.asp','self',false,'说明文字',null,'','','',''));
 msub5.addsubItem(new mMenuItem('主菜单五3-b','/index.asp','self',false,'说明文字',null,'','','',''));
 msub5.addsubItem(new mMenuItem('主菜单五3-c','/index.asp','self',false,'说明文字',null,'','','',''));
  
msub3.addsubItem(new mMenuItem('主菜单五3-d','/index.asp','self',false,'说明文字',null,'','','',''));
 msub4.addsubItem(new mMenuItem('主菜单五4-d','/index.asp','self',false,'说明文字',null,'','','',''));
 msub5.addsubItem(new mMenuItem('主菜单五5-d','/index.asp','self',false,'说明文字',null,'','','',''));
  
mpmenu.addItem(msub5);
 mpmenu6=new mMenu('返回主页','/index.asp','self','','','','');
 mpmenu7=new mMenu('访问论坛','/forum/index.asp','self','','','','');
 mwritetodocument();
 //要获得最新版本的菜单,请访问<a href="http://www.0755i.com/" target="_blank">http://www.0755i.com/</a>

你一定很喜欢像QQ或者MSN好友登录提示的效果网页中实现
(注意,如果使用以下代码,先将全角“<>”替换成半角的“<>”才能正常使用):
 
 <SCRIPT>
var oPopup = window.createPopup();
 var popTop=50;
 function popmsg(msgstr){
 var winstr="<table style="border: 1 solid  #FFA6CA"  width="241" height="172" border="0" cellpadding="0" cellspacing="0"  background="winstr+="<tr><td height="30"> </td></tr><tr><td align="center"><table width="90%" height="110" border="0" cellpadding="0" cellspacing="0">";
winstr+="<tr><td valign="top" style="font-size:12px; color: red; face: Tahoma">"+msgstr+"</td></tr></table></td></tr></table>";
oPopup.document.body.innerHTML = winstr;
 popshow();
 }
 function popshow(){
 window.status=popTop;
 if(popTop>1720){
 clearTimeout(mytime);
 oPopup.hide();
 return;
 }else if(popTop>1520&&popTop<1720){
 oPopup.show(screen.width-250,screen.height,241,1720-popTop);
 }else if(popTop>1500&&popTop<1520){
 oPopup.show(screen.width-250,screen.height+(popTop-1720),241,172);
 }else if(popTop<180){
 oPopup.show(screen.width-250,screen.height,241,popTop);
 }else if(popTop<220){
 oPopup.show(screen.width-250,screen.height-popTop,241,172);
 }
 popTop+=10;
 var mytime=setTimeout("popshow();",50);
 }
</SCRIPT>  
 </script>
 </body>
 </html>
原文地址:https://www.cnblogs.com/tianxuwei/p/10478787.html