首页 > 代码库 > JavaScript特效源码(3、菜单特效)

JavaScript特效源码(3、菜单特效)

2024-07-18 18:03:29   222人阅读

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="http://www.mamicode.com/index.html" class="cc">本站首页</a></td></tr><tr><td><a href="http://www.mamicode.com/navigation/newscript.htm" class="cc">最新更新</a></td></tr><tr><td><a href="http://www.mamicode.com/navigation/applet/appletindex.htm" class="cc">梦想软件</a></td></tr><tr><td><a href="http://www.mamicode.com/jsschool/index.htm" class="cc">桌面壁纸</a></td></tr><tr><td><a href="http://www.mamicode.com/popmenu.htm" class="cc">更多连接</a></td></tr><tr><td><a href="http://www.mamicode.com/popmenu.htm" class="cc">更多连接</a></td></tr><tr><td><a href="http://www.mamicode.com/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.scrollLeftnewY = window.event.y + document.body.scrollTopmenu = document.all.itemopenif ( menu.style.display == ""){menu.style.display = "none" }else {menu.style.display = ""}menu.style.pixelLeft = newX - 50menu.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" onm ouseover="pull()" onm ouseout="draw()">‘)</script> <layer id="slidemenubar" onm ouseover="pull()" onm ouseout="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:yshot@263.net"sitemlinks[8]="http://www.happydrips.com"for (i=0;i<=sitems.length-1;i++)document.write(‘<a href=http://www.mamicode.com/‘+sitemlinks[i]+‘>‘+sitems[i]+‘
‘)"JavaScript1.2">function regenerate(){window.location.reload()}function regenerate2(){if (document.layers)setTimeout("window.onresize=regenerate",400)}window.onload=regenerate2if (document.all){document.write(‘</div>‘)themenu=document.all.slidemenubar2.stylerightboundary=0leftboundary=-150}else{themenu=document.layers.slidemenubarrightboundary=150leftboundary=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+=5else if(document.layers&&themenu.left<rightboundary)themenu.left+=5else if (window.pullit)clearInterval(pullit)}function drawengine(){if (document.all&&themenu.pixelLeft>leftboundary)themenu.pixelLeft-=5else if(document.layers&&themenu.left>leftboundary)themenu.left-=5else if (window.drawit)clearInterval(drawit)}</script>

 3、浮动顶层的菜单

一、浮动顶层的菜单1[修改图片名称及链接的地址][共2步]====1、将以下代码加入HTML的<head></head>之间：<SCRIPT LANGUAGE="JavaScript"><!-- Beginfunction 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 onl oad="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="http://www.mamicode.com/地址1.htm"><img src="http://www.mamicode.com/图片1.gif" width="105" height="21" border="0"></a><br><a href="http://www.mamicode.com/地址2.htm"><img src="http://www.mamicode.com/图片2.gif" width="105" height="21" border="0"></a><br><a href="http://www.mamicode.com/地址3.htm"><img src="http://www.mamicode.com/图片3.gif" width="105" height="21" border="0"></a><br><a href="http://www.mamicode.com/地址4.htm"><img src="http://www.mamicode.com/图片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-15document.bar.top = asetTimeout(‘stat()‘,2)}function fix(){nome=navigator.appNameif(nome==‘Netscape‘){stat()}else{var a=document.body.scrollTop+document.body.clientHeight-document.all.bar.offsetHeight+15bar.style.top = a}}//--></script> ====2、将以下代码加入HTML的<body></body>之间：<body onl oad=‘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="http://www.mamicode.com/index.html">回到首页 </a></td><td width="147"> <a href="http://www.mamicode.com/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="http://www.mamicode.com/#">点这里看本站栏目</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="http://www.mamicode.com/link1.htm">link1</a></font><br>‘selection[1]=‘<font face="宋体"><a href="http://www.mamicode.com/link2.htm">link2</a></font><br>‘selection[2]=‘<font face="宋体"><a href="http://www.mamicode.com/link3.htm">link3</a></font><br>‘selection[3]=‘<font face="宋体"><a href="http://www.mamicode.com/link4.htm">link4</a></font><br>‘selection[4]=‘<font face="宋体"><a href="http://www.mamicode.com/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.offsetXdropmenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18if (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"elsedocument.dropmenu03.visibility="hide"document.dropmenu03.left=e.pageX-e.layerXdocument.dropmenu03.top=e.pageY-e.layerY+19return 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="http://www.mamicode.com/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”吧？

 


联系
我们