呵呵,下面,我来给你介绍几个网站常见的菜单
第一个:仿网易的滑动门导航菜单
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>仿网易的滑动门技术,用DIV+CSS技术实现</title>
<style type="text/css">
<!--
#header {
background-color: #F8F4EF
height: 200px
width: 400px
margin: 0px
padding: 0px
border: 1px solid #ECE1D5
font-family: "宋体"
font-size: 12px
}
#menu {
margin: 0px
padding: 0px
list-style-type: none
}
#menu li {
display: block
width: 100px
text-align: center
float: left
margin: 0px
padding-top: 0.2em
padding-right: 0px
padding-bottom: 0.2em
padding-left: 0px
cursor: hand
}
.sec1 { background-color: #FFFFCC}
.sec2 { background-color: #00CCFF}
.block { display: block}
.unblock { display: none}
-->
</style>
</head>
<body>
<script language=javascript>
function secBoard(n)
{
for(i=0i<menu.childNodes.lengthi++)
menu.childNodes[i].className="sec1"
menu.childNodes[n].className="sec2"
for(i=0i<main.childNodes.lengthi++)
main.childNodes[i].style.display="none"
main.childNodes[n].style.display="block"
}
</script>
<div id="header">
<ul id="menu">
<li onMouseOver="secBoard(0)" class="sec2">最新新闻</li>
<li onMouseOver="secBoard(1)" class="sec1">最新文章</li>
<li onMouseOver="secBoard(2)" class="sec1">最新日志</li>
<li onMouseOver="secBoard(3)" class="sec1">论坛新帖</li>
</ul>
<!--内容显示区域-->
<ul id="main">
<li class="block">第一个内容</li>
<li class="unblock">第二个内容</li>
<li class="unblock">第三个内容</li>
<li class="unblock">第四个内容</li>
</ul>
<!--内容显示区域-->
</div>
</body>
</html>
这里基本上是使用Css与Div的结合,在整个布局中已层为单位,实行滑动菜单的是一个javascript脚本函数,调用就可以了,看不懂不要紧,日渐积累才是重要
第二个:经典实用的触发型导航(这是鼠标单击事件控制)
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>网页特效代码|JsCode.CN|---经典实用的触发型导航菜单</title>
</head>
<body>
<STYLE type=text/css>.sec1 {
BORDER-RIGHT: gray 1px solidBORDER-TOP:
#ffffff 1px solidBORDER-LEFT: #ffffff 1px
solidCURSOR: handCOLOR: #000000BORDER-
BOTTOM: #ffffff 1px solidBACKGROUND-COLOR:
#eeeeee
}
.sec2 {
BORDER-RIGHT: gray 1px solidBORDER-TOP:
#ffffff 1px solidFONT-WEIGHT: boldBORDER-
LEFT: #ffffff 1px solidCURSOR: handCOLOR:
#000000BACKGROUND-COLOR: #d4d0c8
}
.main_tab {
BORDER-RIGHT: gray 1px solidBORDER-
LEFT: #ffffff 1px solidCOLOR: #000000BORDER-
BOTTOM: gray 1px solidBACKGROUND-COLOR: #d4d0c8
}
</STYLE>
<!--JavaScript部分-->
<SCRIPT language=javascript>
function secBoard(n)
{
for(i=0i<secTable.cells.lengthi++)
secTable.cells
[i].className="sec1"
secTable.cells[n].className="sec2"
for(i=0i<mainTable.tBodies.lengthi++)
mainTable.tBodies
[i].style.display="none"
mainTable.tBodies
[n].style.display="block"
}
</SCRIPT>
<!--HTML部分-->
<TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0>
<TBODY>
<TR align=middle height=20>
<TD class=sec2 onclick=secBoard(0) width="10%">关于TBODY标记</TD>
<TD class=sec1 onclick=secBoard(1) width="10%">关于cells集合</TD>
<TD class=sec1 onclick=secBoard(2) width="10%">关于tBodies集合</TD>
<TD class=sec1 onclick=secBoard(3) width="10%">关于display属性</TD></TR></TBODY></TABLE>
<TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 width=549 border=0><!--关于TBODY标记-->
<TBODY style="DISPLAY: block">
<TR>
<TD vAlign=top align=middle><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD>指定行做为表体。
<BR>注释:TBODY要素是块要素,并且需要结束标
签。<BR> 即使如果表格没有显式定义TBODY
要素,该要素也提供给所有表。<BR><BR>
参考:《动态HTML参考和开发应用大全》(人民邮电出
版社
Microsoft Corporation著
北京华中兴业科技发展有限公司
译)
<BR><BR></TD></TR></TB
ODY></TABLE></TD></TR></T
BODY><!--关于cells集合-->
<TBODY style="DISPLAY:
none">
<TR>
<TD vAlign=top
align=middle><BR><BR>
<TABLE cellSpacing=0
cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD>检索表行或者整个
表中所有单元格的集合。<BR>应用于TR、TABLE。
<BR><BR>参考:《动态HTML参考和开发应
用大全》(人民邮电出版社
Microsoft Corporation著
北京华中兴业科技发展有限公司
译)
<BR><BR></TD></TR></TB
ODY></TABLE></TD></TR></T
BODY><!--关于tBodies集合-->
<TBODY style="DISPLAY:
none">
<TR>
<TD vAlign=top
align=middle><BR><BR>
<TABLE cellSpacing=0
cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD>检索表中所有TBODY
对象的集合。对象在该集合中按照HTML源顺序排列。
<BR>应用于TABLE。<BR><BR>参考:
《动态HTML参考和开发应用大全》(人民邮电出版社
Microsoft Corporation著
北京华中兴业科技发展有限公司
译)
<BR><BR></TD></TR></TB
ODY></TABLE></TD></TR></T
BODY><!--关于display属性-->
<TBODY style="DISPLAY:
none">
<TR>
<TD vAlign=top
align=middle><BR><BR>
<TABLE cellSpacing=0
cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD>设置或者检索对象
是否被提供。<BR>可能的值为block、none、
inline、list-item、table-header-group、table-
footer-group。<BR>该特性可读写,块要素默认
值为block,内联要素默认值为inline;层叠样式表
(CSS)属性不可继承。<BR><BR>参考:《
动态HTML参考和开发应用大全》(人民邮电出版社
Microsoft Corporation著
北京华中兴业科技发展有限公司译)
<BR><BR><A
href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp?frame=true"target=_blank>点击此处
</A>可参阅微软<A href="http://msdn.microsoft.com/" target=_blank>MSDN在线</A>上的解释。
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE&g
t</body>
</html>
这里跟上面不同的区别在与这是鼠标移动和滑动的事件区别!
第三个:仿拍拍的切换效果菜单(里面的图片是我放上去的,所以会看不到图片的,呵呵 继续)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<meta name="robots" content="all" />
<title>网页特效|网页特效代码(JsHtml.cn)---仿拍拍paipai.com首页产品图片随机轮显切换效果</title><style>
body {font-size:12px}
img {border:0px}
#sale{right:206pxtop:0width:260pxbackground:#fff}
#saleTitle{text-align:rightpadding-top:5pxpadding-right:5pxwidth:255pxheight:20pxbackground:url("images/saleTitle.gif") no-repeat}
#saleList{margin-top:5px}
#saleList .saleTwo{height:108pxbackground:url("images/salelineH.gif") bottom repeat-x}
#saleList a{display:blockheight:108pxwidth:86pxtext-align:centerfloat:leftoverflow:hidden}
#saleList a.saleItem{background:url("images/salelineV.gif") right repeat-y}
#saleList a img{margin:5px 0}
#saleList a:hover{background-color:#EBFFC5}
</style>
<script type="text/javascript">
rnd.today=new Date()
rnd.seed=rnd.today.getTime()
function rnd(){
rnd.seed = (rnd.seed*9301+49297) % 233280
return rnd.seed/(233280.0)
}
function rand(number){
return Math.ceil(rnd()*number)-1
}
function nextSale(order){
if(order=="up") saleNum--
else saleNum++
if(saleNum>2) saleNum=0
else if(saleNum<0) saleNum=2
//alert(saleNum)
for(i=0i<3i++)
document.getElementById("saleList"+i).style.display="none"
document.getElementById("saleList"+saleNum).style.display=""
}
</script>
</head>
<body>
<div id="sale" class="absolute overflow">
<div id="saleTitle" class="absolute">
<a href="javascript:nextSale('up')" title="点击到上一屏">
<img src="images/saleFore.gif" hspace="4" onmouseover="this.src='images/saleForeOver.gif'" onmouseout="this.src='images/saleFore.gif'" /></a><a href="javascript:nextSale('down')" title="点击到下一屏"><img src="images/saleNext.gif" onmouseover="this.src='images/saleNextOver.gif'" onmouseout="this.src='images/saleNext.gif'" /></a></div>
<div class="overflow" style="height:330px" id="saleList">
<script type="text/javascript">var saleNum=rand(3)</script>
<div id="saleList0" style="display:none">
<div class="saleTwo">
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="圣诞浪漫饰品超级大促" src="/jsimages/UploadFiles_3321/200804/20080423085515804.jpg" width="65" height="65" /></div>
<div>
圣诞浪漫饰品<br />
超级大促</div>
</a>
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="摄像头集结号给你新的感觉" src="/jsimages/UploadFiles_3321/200804/20080423085516472.jpg" width="65" height="65" /></div>
<div>
摄像头集结号<br />
给你新的感觉</div>
</a><a href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="好感度提升韩版娃娃装" src="/jsimages/UploadFiles_3321/200804/20080423085516162.jpg" width="65" height="65" /></div>
<div>
好感度提升<br />
韩版娃娃装</div>
</a></div>
<div class="saleTwo">
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="复古牛仔外套特惠119元起" src="/jsimages/UploadFiles_3321/200804/20080423085516293.jpg" width="65" height="65" /></div>
<div>
复古牛仔外套<br />
特惠119元起</div>
</a>
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="圣诞拍拍特供运动服3折" src="/jsimages/UploadFiles_3321/200804/20080423085516802.jpg" width="65" height="65" /></div>
<div>
圣诞拍拍特供<br />
运动服3折</div>
</a><a href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="摄像头集结号给你新的感觉" src="/jsimages/UploadFiles_3321/200804/20080423085516472.jpg" width="65" height="65" /></div>
<div>
摄像头集结号<br />
给你新的感觉</div>
</a></div>
<div>
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="圣诞拍拍特供电脑周边4折" src="/jsimages/UploadFiles_3321/200804/20080423085516530.jpg" width="65" height="65" /></div>
<div>
圣诞拍拍特供<br />
电脑周边4折</div>
</a>
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="party扮靓甜美腮红" src="/jsimages/UploadFiles_3321/200804/20080423085516658.jpg" width="65" width="65" height="65" /></div>
<div>
party扮靓<br />
甜美腮红</div>
</a><a href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="好感度提升韩版娃娃装" src="/jsimages/UploadFiles_3321/200804/20080423085516162.jpg" width="65" height="65" /></div>
<div>
好感度提升<br />
韩版娃娃装</div>
</a></div>
</div>
<div id="saleList1" style="display:none">
<div class="saleTwo">
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="新奇好玩便宜尽在网游频道" src="/jsimages/UploadFiles_3321/200804/20080423085516612.jpg" width="65" height="65" /></div>
<div>
新奇好玩便宜<br />
尽在网游频道</div>
</a>
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="展现高贵气质骑士系马靴" src="/jsimages/UploadFiles_3321/200804/20080423085516202.jpg" width="65" height="65" /></div>
<div>
展现高贵气质<br />
骑士系马靴</div>
</a><a href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="摄像头集结号给你新的感觉" src="/jsimages/UploadFiles_3321/200804/20080423085516472.jpg" width="65" height="65" /></div>
<div>
摄像头集结号<br />
给你新的感觉</div>
</a></div>
<div class="saleTwo">
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="永不过时条纹毛衣" src="/jsimages/UploadFiles_3321/200804/20080423085516984.jpg" width="65" height="65" /></div>
<div>
永不过时<br />
条纹毛衣</div>
</a>
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="圣诞拍拍特供运动鞋2折" src="/jsimages/UploadFiles_3321/200804/20080423085516651.jpg" width="65" height="65" /></div>
<div>
圣诞拍拍特供<br />
运动鞋2折</div>
</a><a href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="好感度提升韩版娃娃装" src="/jsimages/UploadFiles_3321/200804/20080423085516162.jpg" width="65" height="65" /></div>
<div>
好感度提升<br />
韩版娃娃装</div>
</a></div>
<div>
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="精简唯美索爱K630" src="/jsimages/UploadFiles_3321/200804/20080423085516302.jpg" width="65" height="65" /></div>
<div>
精简唯美<br />
索爱K630</div>
</a>
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="原装瑞士军刀精选" src="/jsimages/UploadFiles_3321/200804/20080423085516549.jpg" width="65" width="65" height="65" /></div>
<div>
原装瑞士军刀<br />
精选</div>
</a><a href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="超薄机身索爱W880" src="/jsimages/UploadFiles_3321/200804/20080423085516711.jpg" width="65" height="65" /></div>
<div>
超薄机身<br />
索爱W880</div>
</a></div>
</div>
<div id="saleList2" style="display:none">
<div class="saleTwo">
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="各就各味秋冬饮食计划" src="/jsimages/UploadFiles_3321/200804/20080423085516704.jpg&type=3" width="65" height="65" /></div>
<div>
各就各味<br />
秋冬饮食计划</div>
</a><a href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="好感度提升韩版娃娃装" src="/jsimages/UploadFiles_3321/200804/20080423085516162.jpg" width="65" height="65" /></div>
<div>
好感度提升<br />
韩版娃娃装</div>
</a></div>
<div class="saleTwo">
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="圣诞拍拍特供随身视听5折" src="/jsimages/UploadFiles_3321/200804/20080423085516375.jpg" width="65" height="65" /></div>
<div>
圣诞拍拍特供<br />
随身视听5折</div>
</a><a href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="超薄机身索爱W880" src="/jsimages/UploadFiles_3321/200804/20080423085516711.jpg" width="65" height="65" /></div>
<div>
超薄机身<br />
索爱W880</div>
</a></div>
<div>
<a class="saleItem" href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="我爱我家家居大抢购" src="/jsimages/UploadFiles_3321/200804/20080423085516954.jpg" width="65" height="65" /></div>
<div>
我爱我家<br />
家居大抢购</div>
</a><a href="http://www.jshtml.cn" target="_blank">
<div>
<img alt="超值彩妆套装变身派对女王" src="/jsimages/UploadFiles_3321/200804/20080423085516919.jpg" width="65" width="65" height="65" /></div>
<div>
超值彩妆套装<br />
变身派对女王</div>
</a></div>
</div>
</div>
</div>
<script type="text/javascript">document.getElementById("saleList"+saleNum).style.display=""</script>
<p></p>
<p>更多网页特效代码尽在 <a href="http://www.jshtml.cn/">网页特效代码</a></p>
</body>
</html>
这个仿拍拍基本上就是2层放图片,但用起来的效果还是可以的,如果不喜欢我还有下面呢,慢慢学,总会看懂的 (最重要的还是Css哦)
这个主要就是让层实现隐藏 我觉得这个在层使用方面还是好的
从总体上看,在实现层与层之间的交互,在其代码 我觉得你有必要去认真看下 !
以上是我介绍额度菜单,虽然不是很强大,但是却很使用,而且在J2EE中
菜单基本上是一个假象,都是用层与Css之间的特效做出来的!
学会了层的具体应用,我相信你也可以有自己特色的菜单的
那我祝你好运咯!!加油!!
1、CSS定义,在Extensionsr/Cursor下拉框里有很多鼠标样式<HTML>
<HEAD>
<TITLE>Table of all supported cursors</TITLE><STYLE>
BODY
{
background-color:white
color:black
font-family:verdana
font-size:.8em
} H1
{
font-size:1.5em
color:#3366CC
font-family:tahoma
}
H2
{
font-size:1.3em
color:#3366CC
font-family:tahoma
}
TD
{
background-color:#e4e4e4
color:black
font-family:verdana
font-size:.8em
width:125px
padding:5px
}
A
{
border-top:1px solid #e4e4e4
padding-top:10px
width:600px
color:#3366CC
text-decoration:none
}
A:visited
{
color:#3366CC
text-decoration:none
}
A:hover
{
color:#3366CC
text-decoration:underline
}
</STYLE>
</HEAD><!--TOOLBAR_START-->
<!--TOOLBAR_EXEMPT-->
<!--TOOLBAR_END--><BODY><H1>Currently supported cursors</H1>
<P>When you use the inline style designation <STRONG>style="<EM>cursor:cursor</EM>"</STRONG>, the cursor displays the appropriate cursor for the cell that you move the pointer over.</P><B>Existing cursor styles</B>
<BR>
<BR>
<TABLE CELLPADDING="2" CELLSPACING="2">
<TR>
<TD STYLE="cursor:auto" >auto</TD>
<TD STYLE="cursor:crosshair" >crosshair</TD>
<TD STYLE="cursor:default" >default</TD>
<TD STYLE="cursor:move" >move</TD>
</TR>
<TR>
<TD STYLE="cursor:hand" >hand</TD>
<TD STYLE="cursor:text" >text</TD>
<TD STYLE="cursor:wait" >wait</TD>
<TD STYLE="cursor:help" >help</TD>
</TR>
<TD TITLE="This cursor style has been available in previous versions but has been updated for IE 6" >*-resize</TD>
</TABLE><H2>New cursors for IE 6</H2>
<TABLE>
<TR>
<TD STYLE="cursor:pointer">pointer</TD>
<TD STYLE="cursor:progress">progress</TD>
<TD STYLE="cursor:not-allowed">not-allowed</TD>
<TD STYLE="cursor:no-drop">no-drop</TD>
</TR>
<TR>
<TD STYLE="cursor:vertical-text">vertical-text</TD>
<TD STYLE="cursor:all-scroll">all-scroll</TD>
<TD STYLE="cursor:col-resize">col-resize</TD>
<TD STYLE="cursor:row-resize">row-resize</TD>
</TR>
</TABLE><BR>
<B>Directional cursors</B>
<BR>
<BR>
*-resize has been available in previous versions but has been updated for IE 6.
<BR>
<BR><TABLE>
<TR>
<TD STYLE="cursor:n-resize">n-resize</TD>
<TD STYLE="cursor:s-resize">s-resize</TD>
<TD STYLE="cursor:ne-resize">ne-resize</TD>
<TD STYLE="cursor:sw-resize">sw-resize</TD>
</TR>
<TR>
<TD STYLE="cursor:nw-resize">nw-resize</TD>
<TD STYLE="cursor:se-resize">se-resize</TD>
<TD STYLE="cursor:e-resize">e-resize</TD>
<TD STYLE="cursor:w-resize">w-resize</TD>
</TR>
</TABLE>
<BR><B>Custom cursors</B>
<BR>
<BR><TABLE CELLPADDING="2" CELLSPACING="2">
<TR>
<TD STYLE="cursor:url(elogo.cur)">url(custom.cur)</TD>
<TD STYLE="cursor:url(banana.ani)">url(custom.ani)</TD>
</TR>
</TABLE><P>[To view the source code, right-click anywhere in the window.]</P></BODY>
</HTML>
您可以先修改部分代码再运行
2、随鼠标指针移动的时间
html>
<head>
<title>网页特效|Linkweb.cn/Js|---跟随鼠标的日期时间表盘</title>
</head><BODY>
<!--将以下代码加入HTML的<Body></Body>之间-->
<SCRIPT language=JavaScript>
<!--
dCol="0000FF"
fCol="FF0000"
sCol="00FF00"
mCol="000000"
hCol="000000"
ClockHeight=40
ClockWidth=40
ClockFromMouseY=0
ClockFromMouseX=100
d=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六")
m=new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月")
date=new Date()
day=date.getDate()
year=date.getYear()
if (year <2000) year=year+1900
TodaysDate="年 "+m[date.getMonth()]+" "+day+"日 "+d[date.getDay()]+" "+year
D=TodaysDate.split('')
H='...'
H=H.split('')
M='....'
M=M.split('')
S='.....'
S=S.split('')
Face='1 2 3 4 5 6 7 8 9 10 11 12'
font='Arial'
size=1
speed=0.6
ns=(document.layers)
ie=(document.all)
Face=Face.split(' ')
n=Face.length
a=size*10
ymouse=0
xmouse=0
scrll=0
props="<font face="+font+" size="+size+" color="+fCol+">"
props2="<font face="+font+" size="+size+" color="+dCol+">"
Split=360/n
Dsplit=360/D.length
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7
HandX=-2.5
scrll=0
step=0.06
currStep=0
y=new Array()x=new Array()Y=new Array()X=new Array()
for (i=0i <ni++){y[i]=0x[i]=0Y[i]=0X[i]=0}
Dy=new Array()Dx=new Array()DY=new Array()DX=new Array()
for (i=0i <D.lengthi++){Dy[i]=0Dx[i]=0DY[i]=0DX[i]=0}
if (ns){
for (i=0i <D.lengthi++)
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>')
for (i=0i <ni++)
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>')
for (i=0i <S.lengthi++)
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>')
for (i=0i <M.lengthi++)
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>')
for (i=0i <H.lengthi++)
document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>')
}
if (ie){
document.write('<div id="Od" style="position:absolutetop:0pxleft:0px"><div style="position:relative">')
for (i=0i <D.lengthi++)
document.write('<div id="ieDate" style="position:absolutetop:0pxleft:0height:'+a+'width:'+a+'text-align:center">'+props2+D[i]+'</font></div>')
document.write('</div></div>')
document.write('<div id="Of" style="position:absolutetop:0pxleft:0px"><div style="position:relative">')
for (i=0i <ni++)
document.write('<div id="ieFace" style="position:absolutetop:0pxleft:0height:'+a+'width:'+a+'text-align:center">'+props+Face[i]+'</font></div>')
document.write('</div></div>')
document.write('<div id="Oh" style="position:absolutetop:0pxleft:0px"><div style="position:relative">')
for (i=0i <H.lengthi++)
document.write('<div id="ieHours" style="position:absolutewidth:16pxheight:16pxfont-family:Arialfont-size:16pxcolor:'+hCol+'text-align:centerfont-weight:bold">'+H[i]+'</div>')
document.write('</div></div>')
document.write('<div id="Om" style="position:absolutetop:0pxleft:0px"><div style="position:relative">')
for (i=0i <M.lengthi++)
document.write('<div id="ieMinutes" style="position:absolutewidth:16pxheight:16pxfont-family:Arialfont-size:16pxcolor:'+mCol+'text-align:centerfont-weight:bold">'+M[i]+'</div>')
document.write('</div></div>')
document.write('<div id="Os" style="position:absolutetop:0pxleft:0px"><div style="position:relative">')
for (i=0i <S.lengthi++)
document.write('<div id="ieSeconds" style="position:absolutewidth:16pxheight:16pxfont-family:Arialfont-size:16pxcolor:'+sCol+'text-align:centerfont-weight:bold">'+S[i]+'</div>')
document.write('</div></div>')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse
function ClockAndAssign(){
time = new Date ()
secs = time.getSeconds()
sec = -1.57 + Math.PI * secs/30
mins = time.getMinutes()
min = -1.57 + Math.PI * mins/30
hr = time.getHours()
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360
if (ie){
Od.style.top=window.document.body.scrollTop
Of.style.top=window.document.body.scrollTop
Oh.style.top=window.document.body.scrollTop
Om.style.top=window.document.body.scrollTop
Os.style.top=window.document.body.scrollTop
}
for (i=0i <ni++){
var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style
F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll
F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180)
}
for (i=0i <H.lengthi++){
var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style
HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll
HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs)
}
for (i=0i <M.lengthi++){
var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style
ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll
ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min)
}
for (i=0i <S.lengthi++){
var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style
SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll
SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec)
}
for (i=0i <D.lengthi++){
var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style
DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll
DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180)
}
currStep-=step
}
function Delay(){
scrll=(ns)?window.pageYOffset:0
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed)
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed)
for (i=1i <D.lengthi++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed)
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed)
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed)
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed)
for (i=1i <ni++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed)
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed)
}
ClockAndAssign()
setTimeout('Delay()',40)
}
if (ns||ie)window.onload=Delay
//-->
</SCRIPT>
</body></html>
希望对你有帮助
在搜索按钮的代码里加入下面的代码 (wait.jpg 会在搜索过程中显示出来,你可以做成你想要的样子,搜索完成后会自动隐藏)<INPUT type=image src="ecnany2.png" align=absMiddle border=0 name=RedImg onclick="startObjMessage('objDiv'),this.form.submit()">
DIV align="center" id="objDiv" style="DISPLAY: noneZ-INDEX: 1POSITION: absolute">
<img src="wait.jpg" align="absmiddle"></DIV>
在搜索页面里加上以下的代码(放在搜索代码前)
<SCRIPT>
var intTimeStep=40
var isIe=(window.ActiveXObject)?true:false
var intAlphaStep=(isIe)?5:0.05
var curSObj=null
var curOpacity=null
var stopTime=0
function startObjMessage(objId)
{
curSObj=document.getElementById(objId)
if(isIe){curSObj.style.cssText='DISPLAY: noneZ-INDEX: 1FILTER: alpha(opacity=0)POSITION: absolute'}
setMessage()
}
function setMessage()
{
if(isIe){curSObj.filters.alpha.opacity=0}
else{curOpacity=0curSObj.style.opacity=0}
curSObj.style.display=''
setMessageShow()
}
function setMessageShow()
{
if(isIe)
{
curSObj.filters.alpha.opacity+=intAlphaStep
if (curSObj.filters.alpha.opacity<100) {setTimeout('setMessageShow()',intTimeStep)}
else{stopTime+=10if(stopTime<500){setTimeout('setMessageShow()',intTimeStep)}else{stopTime=0setMessageClose()}}
}else
{
curOpacity+=intAlphaStep
curSObj.style.opacity =curOpacity
if (curOpacity<1) {setTimeout('setMessageShow()',intTimeStep)}
else{stopTime+=10if(stopTime<200){setTimeout('setMessageShow()',intTimeStep)}else{stopTime=0setMessageClose()}}
}
}
function setMessageClose()
{
if(isIe)
{
curSObj.filters.alpha.opacity-=intAlphaStep
if (curSObj.filters.alpha.opacity>0) {
setTimeout('setMessageClose()',intTimeStep)
}
else {
curSObj.style.display='none'
}
}
else
{
curOpacity-=intAlphaStep
if (curOpacity>0) {
curSObj.style.opacity =curOpacity
setTimeout('setMessageClose()',intTimeStep)
}
else {
curSObj.style.display='none'
}
}
}
</SCRIPT>