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>背景 ...
随机推荐
- NX二次开发-设置WCS位置UF_CSYS_set_wcs
NX9+VS2012 UF_initialize(); //输入X向量Y向量输出一个3*3矩阵 ] = {0.0, 0.0, 1.0}; ] = {0.0, 1.0, 0.0}; ]; UF_MTX3 ...
- Python 利用微信端口查看列车时刻表
import requests """ 该程序查看列车时刻 """ url0 = 'http://www.webxml.com.cn/Web ...
- spring boot部署到阿里云碰到的总总问题
2375错误,我没装docker,从pom中删了吧 mysql,不能写本机对外,得写127.0.0.1. 如何生成jar包,在pom中写上jar <groupId>com.coding&l ...
- UVA 10382 Watering Grass 贪心+区间覆盖问题
n sprinklers are installed in a horizontal strip of grass l meters long and w meters wide. Each spri ...
- js实现下拉框
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Firefox Developer Edition 是专为开发者设计
Firefox Developer Edition 当前是基于 Firefox 35.0a2,这款全新的浏览器包括内建调试功能,集成类似于Firefox火狐工具适配器的专用工具,并在浏览器当中内建We ...
- java.lang.NoSuchMethodError: com.google.common.hash.HashFunction.hashInt(I)Lcom/google/common/hash/HashCode; 解决办法
今天在java 上运行spark查询的时候出现一个问题: java.lang.NoSuchMethodError: com.google.common.hash.HashFunction.hashIn ...
- 【CF1215F】 Radio Stations
题目 比较精妙的\(\text{2-sat}\)建图了 还是按照套路把每个电台拆成\((0/1,i)\)表示不选/选 前两种连边是板子就不解释了 考虑如何限制选择一个唯一的\(f\),并且还能限制不选 ...
- verifier 调试内存泄露
没啥技术含量,都是老段子了, 这次记下来,只是我想说,我也做过,留个念相. 前置条件,电脑里面必须得有Verifier,有了之后把自己的驱动加进去, WinDBG上双机,然后就可以跑了,跑一段时间就可 ...
- 2018 年 -- 15 个有意思的 JavaScript 和 CSS 库
在Tutorialzine上你可以了解最新最酷的Web发展趋势.这就是为什么每个月都会发布一些偶然发现并认为值得你关注的最佳资源的缘由. Direction Reveal (方向展示) 该插件检测光标 ...