1、左键点击显示菜单
左键弹出式菜单[推荐][修改显示的文字及链接即可][共2步] ====1、将以下代码加入HEML的<head></head>之间: <style type="text/css"> body{font: 9pt "宋体"; margintop: 0px ; color: #ffffff; background: #000000} a.{ font: 9pt "宋体"; cursor: hand; font-size: 9pt ; color: #ffffff; text-decoration: none } a:active{ font: 9pt "宋体"; cursor: hand; color: #FF0033 } a.cc:hover{ font: 9pt "宋体"; cursor: hand; color: #FF0033} .box{ font: 9pt "宋体"; position: absolute; background: #000000 } </style> ====2、将以下代码加入到HEML的<body></body>之间: <table id="itemopen" class="box" style="display:none"> <tr> <td>弹出菜单</td> </tr> <tr> <td><a href="../../../index.html" class="cc">本站首页</a></td> </tr> <tr> <td><a href="../../navigation/newscript.htm" class="cc">最新更新</a></td> </tr> <tr> <td><a href="../../navigation/applet/appletindex.htm" class="cc">梦想软件</a></td> </tr> <tr> <td><a href="../../../jsschool/index.htm" class="cc">桌面壁纸</a></td> </tr> <tr> <td><a href="popmenu.htm" class="cc">更多连接</a></td> </tr> <tr> <td><a href="popmenu.htm" class="cc">更多连接</a></td> </tr> <tr> <td><a href="popmenu.htm" class="cc">更多连接</a></td> </tr> </table> </center></div><!-- End of Popup Menu --> <script language="JavaScript"> document.onclick = popUp function popUp() { newX = window.event.x + document.body.scrollLeft newY = window.event.y + document.body.scrollTop menu = document.all.itemopen if ( menu.style.display == ""){ menu.style.display = "none" } else { menu.style.display = ""} menu.style.pixelLeft = newX - 50 menu.style.pixelTop = newY - 50 } </script>
2、推拉门式菜单
推拉门式样的菜单[根据提示修改][共2步] ====1、将以下代码加入到HEML的<head></head>之间: <style type="text/css"> <!--.link { color : #000000; text-decoration : none; }A.link:hover { color : red; }A.link:active { color : #000000; text-decoration : none; }//--> </style> <style type="text/css"> <!-- #slidemenubar2{position:absolute;left:-110pt;width:120pt;top:100pt;border:1.5pt solid black; background-color:#ffffff;layer-background-color:#ffffff;font: 9pt/20pt "宋体";} body { font-size: 9pt; margin: 0pt} #slidemenubar { position:absolute; left:-110pt;width:120pt;top:100pt;border:1.5pt black solid;background-color:#F3F3F3;layer-background-color:lightyellow; font: 9pt/20pt "宋体"; } //--> </style> ====2、将以下代码加入到HEML的<body></body>之间: <script language="JavaScript1.2"> if (document.all) document.write(‘<div id="slidemenubar2" style="left:-100" onMouseover="pull()" onMouseout="draw()">‘) </script> <layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()"> <script language="JavaScript1.2"> var sitems=new Array() var sitemlinks=new Array() //以下是菜单内容,自由设置; sitems[0]="本站首页" sitems[1]="最新更新" sitems[2]="梦想软件" sitems[3]="其它栏目" sitems[4]="桌面壁纸" sitems[5]="给我留言" sitems[6]="下载特区" sitems[7]="Email Me" sitems[8]="我的简介" //菜单项目连接 sitemlinks[0]="http://www.happydrips.com" sitemlinks[1]="http://www.abc.com" sitemlinks[2]="http://abc.ab.com" sitemlinks[3]="../index.htm" sitemlinks[4]="../jsschool/index.htm" sitemlinks[5]="../../../gsbook.htm" sitemlinks[6]="../../../perl/index.htm" sitemlinks[7]="mailto:[email protected]" sitemlinks[8]="http://www.happydrips.com" for (i=0;i<=sitems.length-1;i++) document.write(‘<a href=‘+sitemlinks[i]+‘>‘+sitems[i]+‘</a><br>‘) </script> </layer> <script language="JavaScript1.2"> function regenerate(){ window.location.reload() }function regenerate2(){ if (document.layers) setTimeout("window.onresize=regenerate",400) }window.onload=regenerate2 if (document.all){ document.write(‘</div>‘) themenu=document.all.slidemenubar2.style rightboundary=0 leftboundary=-150 }else{ themenu=document.layers.slidemenubar rightboundary=150 leftboundary=10 }function pull(){ if (window.drawit) clearInterval(drawit) pullit=setInterval("pullengine()",50) }function draw(){ clearInterval(pullit) drawit=setInterval("drawengine()",50) }function pullengine(){ if (document.all&&themenu.pixelLeft<rightboundary) themenu.pixelLeft+=5 else if(document.layers&&themenu.left<rightboundary) themenu.left+=5 else if (window.pullit) clearInterval(pullit) }function drawengine(){ if (document.all&&themenu.pixelLeft>leftboundary) themenu.pixelLeft-=5 else if(document.layers&&themenu.left>leftboundary) themenu.left-=5 else if (window.drawit) clearInterval(drawit) }</script>
3、浮动顶层的菜单
一、 浮动顶层的菜单1[修改图片名称及链接的地址][共2步] ====1、将以下代码加入HTML的<head></head>之间: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function setVariables() { if (navigator.appName == "Netscape") { v=".top="; dS="document."; sD=""; y="window.pageYOffset"; } else { v=".pixelTop="; dS=""; sD=".style"; y="document.body.scrollTop"; } } function checkLocation() { object="object1"; yy=eval(y); eval(dS+object+sD+v+yy); setTimeout("checkLocation()",10); } // End --> </script> ====2、将以下代码加入HTML的<body></body>之间: <BODY OnLoad="setVariables();checkLocation()"> <div id="object1" style="position:absolute; visibility:show; left:0px; top:0px; z-index:2"> <table width=128 border=0 cellspacing=20 cellpadding=0> <tr> <td height="97"><a href="地址1.htm"><img src="图片1.gif" width="105" height="21" border="0"></a><br> <a href="地址2.htm"><img src="图片2.gif" width="105" height="21" border="0"></a><br> <a href="地址3.htm"><img src="图片3.gif" width="105" height="21" border="0"></a><br> <a href="地址4.htm"><img src="图片4.gif" width="105" height="21" border="0"></a> </td> </tr> </table> </div></BODY> 二、 浮动顶层的菜单2[修改文字及链接地址][共2步] ====1、将以下代码加入到HTML的<head></head>之间: <script language="javascript"> <!-- function stat(){ var a = pageYOffset+window.innerHeight-document.bar.document.height-15 document.bar.top = a setTimeout(‘stat()‘,2) } function fix(){ nome=navigator.appName if(nome==‘Netscape‘){ stat() } else{ var a=document.body.scrollTop+document.body.clientHeight-document.all.bar.offsetHeight+15 bar.style.top = a }} //--> </script> ====2、将以下代码加入HTML的<body></body>之间: <body onLoad=‘fix()‘ onScroll="fix()" onResize="fix()"> //这一行不要忘记写 /*span标签内放入一个TABLE,里面就是你的站点连接菜单,用TABLE的目的是比较容易控制布局。你 可以自由修改下一行的代码,修正菜单出现的绝对位置。 */ <span id="bar" style="position:absolute; left:68px; top:455px; width:614px; height:45px; z-index:9" > <table border="1" hspace="1" cellpadding="1" bordercolor="#000000" bgcolor="#FFFFFF"> <tr align="center"> <td width="190"> <a href="index.html">回到首页 </a></td> <td width="147"> <a href="newscript.htm">最新更新页</a></td> <td width="96"> <a href="http://qdjacky.126.htm">梦想软件</a></td> <td width="158"> <a href="http://qdjacky.126.com" target="_blank">梦想软件</a> </td> </tr> </table> </span>
4、下拉菜单
渐显效果下拉菜单[推荐][修改显示的文字及链接][共2步][IE适用] ====1、将以下代码加入HTML的<head></head>之间: <style> <!-- #iewrap{ position:relative; height:30px } #iewrap2{ position:absolute } #dropmenu03{ filter:revealTrans(Duration=1.5,Transition=12) visibility:hide } a:hover { color: #FF0000} body { font-family: "宋体"; font-size: 9pt; text-decoration: none} a { font-family: "宋体"; font-size: 9pt; text-decoration: none} --> </style> ====2、将以下代码加入HTML的<body></body>之间: <ilayer id="dropmenu01" height=35px> <layer id="dropmenu02" visibility=show> <span id="iewrap"> <span id="iewrap2" onClick="dropit2();event.cancelBubble=true;return false"> <font face="宋体"><a href="#">点这里看本站栏目</a></font> </span> </span> </layer> </ilayer> <script language="JavaScript1.2"> //如果想关闭 "fade"(消隐)效果,将如下参数设置成false,适用于IE用户。 var enableeffect=true //将如下数组修改成你自己的。 var selection=new Array() selection[0]=‘<font face="宋体"><a href="link1.htm">link1</a></font><br>‘ selection[1]=‘<font face="宋体"><a href="link2.htm">link2</a></font><br>‘ selection[2]=‘<font face="宋体"><a href="link3.htm">link3</a></font><br>‘ selection[3]=‘<font face="宋体"><a href="link4.htm">link4</a></font><br>‘ selection[4]=‘<font face="宋体"><a href="link5.htm">link5</a></font>‘ if (document.layers) document.dropmenu01.document.dropmenu02.visibility=‘show‘ function dropit2(){ if (document.all){ dropmenu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX dropmenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18 if (dropmenu03.style.visibility=="hidden"){ if (enableeffect) dropmenu03.filters.revealTrans.apply() dropmenu03.style.visibility="visible" if (enableeffect) dropmenu03.filters.revealTrans.play() } else{ hidemenu() } } } function dropit(e){ if (document.dropmenu03.visibility=="hide") document.dropmenu03.visibility="show" else document.dropmenu03.visibility="hide" document.dropmenu03.left=e.pageX-e.layerX document.dropmenu03.top=e.pageY-e.layerY+19 return false } function hidemenu(){ if (enableeffect) dropmenu03.filters.revealTrans.stop() dropmenu03.style.visibility="hidden" } function hidemenu2(){ document.dropmenu03.visibility="hide" } if (document.layers){ document.dropmenu01.document.dropmenu02.captureEvents(Event.CLICK) document.dropmenu01.document.dropmenu02.onclick=dropit } else if (document.all) document.body.onclick=hidemenu </script> ====3、将以下代码加入HEML的<body></body>之间:[第2步的下面位置] <!-- 你可以改变菜单出现的外观风格--> <div id="dropmenu03" style="position:absolute;left:0;top:0;layer-background-color:seashell;background-color:seashell;width:100;visibility:hidden;border:1px solid black;padding:0px"> <script language="JavaScript1.2"> if (document.all) dropmenu03.style.padding=‘4px‘ for (i=0;i<selection.length;i++) document.write(selection[i]) </script> </div> <script language="JavaScript1.2"> if (document.layers){ document.dropmenu03.captureEvents(Event.CLICK) document.dropmenu03.onclick=hidemenu2 } </script>
5、普通下拉菜单
一、 ====1、将以下代码加入HTML的<body></body>之间: <FORM name="guideform"> <SELECT name="guidelinks"> <OPTION SELECTED value="http://qdjacky.126.com">我的主页 <OPTION value="http://place.com/page2.htm">友情链接 <OPTION value="http://place.com/page3.htm">友情链接 <OPTION value="http://place.com/page4.htm">友情连接 </SELECT> <INPUT type="button" name="go" value="Go!" onClick="window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value"> </FORM> ====2、特别说明: 菜单中的内容多少不限,按照格式写即可。连接URL使用绝对URL(http://)和相对路径都可以。 在同一页面上不要同时使用这两个普通菜单的代码,当然要使用完全没有问题 只是2个FORM和SELECT的名字(Name)应该不能重复,总不能都叫做“guideform”吧? 二、 普通下拉菜单2[修改文字及链接地址即可][共2步] ====1、将以下代码加入HTML的<body></body>之间: <FORM name="guideform"> <SELECT name="guidelinks" onChange="window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value"> <OPTION SELECTED value="javascript:void(0)">选择一个项目 <OPTION value="http://place.com/page1.htm">友情链接 <OPTION value="http://place.com/page2.htm">友情链接 </SELECT> </FORM> ====2、特别说明:在同一页面上不要同时使用上面2个脚本的代码,当然要使用完全没有问题。 只是2个FORM和SELECT的名字(Name)应该不能重复,总不能都叫做“guideform”吧?
JavaScript特效源码(3、菜单特效)
时间: 2024-10-05 05:00:43