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

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:yshot@263.net"

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、菜单特效)的更多相关文章

JavaScript特效源码(1、文字特效)
注:本文以及以下关于Javascript特效源码都是分享自JavaScript源码大全. 1.逐隐逐现的的特效逐隐逐现的文字特效[推荐使用][适用于IE4++] (修改显示的文字后根据说明进行共2步 ...
多种的android进度条的特效源码
多种的android进度条的特效源码,这个源码是在源码天堂那个网站上转载过来的,我已经修改一部分了,感觉很实用的,大家可以学习一下吧,我就不上传源码了,大家可以直接到那个网站上下载吧. 源码天堂下载地 ...
JavaScript特效源码(4、鼠标特效)
1.鼠标感应--渐现特效鼠标感应渐显图片[平时很模糊的图片鼠标一放上就显示清楚] [修改图片名称即可][共2步] ====1.将以下代码加入HTML的<head></head> ...
3D轮播切换特效源码
这个3D轮播切换特效是我2017年2月份写的当初我刚接触HTML不久,现在把源码分享给大家源码的注释超级清楚 . <!-- 声明文档类型:html 作用:符合w3c统一标准规范每个浏览器 ...
使用C#重写网上的60行 Javascript 俄罗斯方块源码 (带注释)
在很久很久以前,就已经看过 60行Js的俄罗斯方块源码.无奈当时能力不够看明白,当时觉得就是个神作. 现在总算有空再看了,顺便用c#实现一遍(超过60行),顺道熟悉下Js API. 网上其他博客也有分 ...
JavaScript特效源码(7、页面特效二)
7.将站点加入频道栏将站点加入频道栏[看详细说明] ====1.加入channel的方法:使用如下连接指向你的频道文件*.cdf. <a href="javascript:windo ...
JavaScript特效源码(8、其他特效)
1.中文日期中文日期[无须修改][共1步]] ====1.将以下代码加入HEML的<body></body>之间 <script LANGUAGE="Java ...
JavaScript特效源码(6、页面特效一)
1.页面全屏页面全屏显示[ALT+F4关闭][共1步][新弹出窗口并以全屏幕方式显示] ====1.将以下代码加入HTML的<body></body>之间: <form ...
JavaScript特效源码(5、背景特效)
1.数字时钟背景时钟[好大的钟][推荐][共1步] ====1.以下是这个效果的全部代码.[最好从一个空页面开始] <html> <head> <TITLE>背景 ...

随机推荐

BZOJ 4817: [Sdoi2017]树点涂色(lct+线段树)
传送门解题思路跟重组病毒这道题很像.只是有了一个询问\(2\)的操作,然后询问\(2\)的答案其实就是\(val[x]+val[y]-2*val[lca(x,y)]+1\)(画图理解).剩下的操作 ...
NX二次开发-char*转换成CString，多字节转换成Unicode使用方法
//定义一个结构体记录 struct group { CString text; //定义一个CString std::vector<tag_t> boudaries; std::vect ...
说说ReactiveCocoa 2
http://www.cocoachina.com/applenews/devnews/2014/0115/7702.html 转自无网不剩的博客 ReactiveCocoa是Github开源 ...
[DataContract]引用
项目->右键->添加引用->找到System.Runtime.Serialization 添加之
LeetCode刷题笔记-贪心法-格雷编码
题目描述: 格雷编码是一个二进制数字系统,在该系统中,两个连续的数值仅有一个位数的差异. 给定一个代表编码总位数的非负整数 n,打印其格雷编码序列.格雷编码序列必须以 0 开头. 来源:力扣(Leet ...
unittest(2)
测试用例执行顺序 1.setUp和tearDown相关 setUp:表示前置条件,它在每一个用例执行之前必须会执行一次 setUp可以理解为我们需要自动化测试时,需要打开网页窗口,输入对 ...
Docker学习のWindows下安装Docker
一.docker最初只支持linux的,因此在windows下运行需要虚拟机. 利用VirtualBox建立linux虚拟机,在linux虚拟机中安装docker服务端和客户端利用Windows的H ...
Windows7 打开word2003提示：向程序发送命令时出现错误解决方案
1.关闭所有打开的Word文档:(包括任务管理器里的进程)2.复制这条命令:%appdata%\microsoft\templates3.开始 → 运行 → 粘贴上面复制的命令 → 确定4.在打开的目 ...
以 Ubuntu 为例：清理 linux 系统的"垃圾"文件
clean 命令删除所有的软件安装包. 在网络连接正常的情况下,我们执行软件安装命令,软件安装结束后,以 .deb 为后缀的软件包就不再需要了.这种情况和 Windows 平台.手机的安卓平台上的情况 ...
--master-data 的作用
Use this option to dump a master replication server to produce a dump file that can be used to set u ...

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

JavaScript特效源码(3、菜单特效)的更多相关文章

随机推荐

热门专题