求个简单javascript代码 谢谢,网站菜单功能

html-css012

求个简单javascript代码 谢谢,网站菜单功能,第1张

不用说自己菜不菜的,能有这个学习的精神已经很值得鼓励了

呵呵,下面,我来给你介绍几个网站常见的菜单

第一个:仿网易的滑动门导航菜单

<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>