投稿
  1. 首页
  2. 美容护肤

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

搜搜发布•2023-11-16•美容护肤•阅读13

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

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

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

第一个：仿网易的滑动门导航菜单
<html xmlns="http://wwww3org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=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: 02em;
padding-right: 0px;
padding-bottom: 02em;
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=0;i<menuchildNodeslength;i++)
menuchildNodes[i]className="sec1";
menuchildNodes[n]className="sec2";
for(i=0;i<mainchildNodeslength;i++)
mainchildNodes[i]styledisplay="none";
mainchildNodes[n]styledisplay="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/html; charset=gb2312">
<title>网页特效代码|JsCodeCN|---经典实用的触发型导航菜单</title>

</head>

<body>

<STYLE type=text/css>sec1 {
BORDER-RIGHT: gray 1px solid; BORDER-TOP:

#ffffff 1px solid; BORDER-LEFT: #ffffff 1px

solid; CURSOR: hand; COLOR: #000000; BORDER-

BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR:

#eeeeee
}
sec2 {
BORDER-RIGHT: gray 1px solid; BORDER-TOP:

#ffffff 1px solid; FONT-WEIGHT: bold; BORDER-

LEFT: #ffffff 1px solid; CURSOR: hand; COLOR:

#000000; BACKGROUND-COLOR: #d4d0c8
}
main_tab {
BORDER-RIGHT: gray 1px solid; BORDER-

LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-

BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8
}
</STYLE>
<!--JavaScript部分-->
<SCRIPT language=javascript>
function secBoard(n)
{
for(i=0;i<secTablecellslength;i++)
secTablecells

[i]className="sec1";
secTablecells[n]className="sec2";
for(i=0;i<mainTabletBodieslength;i++)
mainTabletBodies

[i]styledisplay="none";
mainTabletBodies

[n]styledisplay="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://msdnmicrosoftcom/workshop/author/dhtml/reference/properties/displayaspframe=true" target=_blank>点击此处
</A>可参阅微软<A href="http://msdnmicrosoftcom/" target=_blank>MSDN在线</A>上的解释。

</TD></TR></TBODY></TABLE>

;</TD></TR></TBODY></TABLE&g

t;</body>

</html>

这里跟上面不同的区别在与这是鼠标移动和滑动的事件区别！

第三个：仿拍拍的切换效果菜单（里面的是我放上去的，所以会看不到的，呵呵 继续）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" "http://wwww3org/TR/xhtml1/DTD/xhtml1-transitionaldtd">
<html xmlns="http://wwww3org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="robots" content="all" />
<title>网页特效|网页特效代码(JsHtmlcn)---仿拍拍paipaicom首页产品随机轮显切换效果</title><style>
body {font-size:12px}
img {border:0px}
#sale{right:206px;top:0;width:260px;background:#fff}
#saleTitle{text-align:right;padding-top:5px;padding-right:5px;width:255px;height:20px;background:url("images/saleTitlegif") no-repeat}
#saleList{margin-top:5px}
#saleList saleTwo{height:108px;background:url("images/salelineHgif") bottom repeat-x;}
#saleList a{display:block;height:108px;width:86px;text-align:center;float:left;overflow:hidden}
#saleList asaleItem{background:url("images/salelineVgif") right repeat-y;}
#saleList a img{margin:5px 0}
#saleList a:hover{background-color:#EBFFC5}
</style>
<script type="text/javascript">
rndtoday=new Date();
rndseed=rndtodaygetTime();
function rnd(){
rndseed = (rndseed9301+49297) % 233280;
return rndseed/(2332800);
}
function rand(number){
return Mathceil(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=0;i<3;i++)
documentgetElementById("saleList"+i)styledisplay="none";
documentgetElementById("saleList"+saleNum)styledisplay="";
}
</script>
</head>
<body>
<div id="sale" class="absolute overflow">
<div id="saleTitle" class="absolute">
<a href="javascript:nextSale('up')" title="点击到上一屏">
<img src="images/saleForegif" hspace="4" onmouseover="thissrc='images/saleForeOvergif'" onmouseout="thissrc='images/saleForegif'" /></a><a href="javascript:nextSale('down')" title="点击到下一屏"><img src="images/saleNextgif" onmouseover="thissrc='images/saleNextOvergif'" onmouseout="thissrc='images/saleNextgif'" /></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://wwwjshtmlcn" target="_blank">
<div>
<img alt="圣诞浪漫饰品超级大促" src="/jsimages/UploadFiles_3321/200804/20080423085515804jpg" width="65" height="65" /></div>
<div>
圣诞浪漫饰品<br />
超级大促</div>
</a>
<a class="saleItem" href="http://wwwjshtmlcn" target="_blank">
<div>
<img alt="摄像头集结号给你新的感觉" src="/jsimages/UploadFiles_3321/200804/20080423085516472jpg" width="65" height="65" /></div>
<div>
摄像头集结号<br />
给你新的感觉</div>
</a><a href="http://wwwjshtmlcn" target="_blank">
<div>
<img alt="好感度提升韩版娃娃装" src="/jsimages/UploadFiles_3321/200804/20080423085516162jpg" width="65" height="65" /></div>
<div>
好感度提升<br />
韩版娃娃装</div>
</a></div>
<div class="saleTwo">
<a class="saleItem" href="http://wwwjshtmlcn" target="_blank">
<div>
<img alt="复古牛仔外套特惠119元起" src="/jsimages/UploadFiles_3321/200804/20080423085516293jpg" width="65" height="65" /></div>
<div>
复古牛仔外套<br />
特惠119元起</div>
</a>
<a class="saleItem" href="http://wwwjshtmlcn" target="_blank">
<div>
<img alt="圣诞拍拍特供运动服3折" src="/jsimages/UploadFiles_3321/200804/20080423085516802jpg" width="65" height="65" /></div>
<div>
圣诞拍拍特供<br />
运动服3折</div>
</a><a href="http://wwwjshtmlcn" target="_blank">
<div>
<img alt="摄像头集结号给你新的感觉" src="/jsimages/UploadFiles_3321/200804/20080423085516472jpg" width="65" height="65" /></div>
<div>
摄像头集结号<br />
给你新的感觉</div>
</a></div>
<div>
<a class="saleItem" href="http://wwwjshtmlcn" target="_blank">
<div>
<img alt="圣诞拍拍特供电脑周边4折" src="/jsimages/UploadFiles_3321/200804/20080423085516530jpg" width="65" height="65" /></div>
<div>
圣诞拍拍特供<br />
电脑周边4折</div>
</a>
<a class="saleItem" href="http://wwwjshtmlcn" target="_blank">
<div>
<img alt="party扮靓甜美腮红" src="/jsimages/UploadFiles_3321/200804/20080423085516658jpg" width="65" width="65" height="65" /></div>
<div>
party扮靓<br />
甜美腮红</div>
</a><a href="http://wwwjshtmlcn" target="_blank">
<div>
<img alt="好感度提升韩版娃娃装" src="/jsimages/UploadFiles_3321/200804/20080423085516162jpg" 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://wwwjshtmlcn" target="_blank">
<div>
<img alt="新奇好玩便宜尽在网游频道" src="/jsimages/UploadFiles_3321/200804/20080423085516612jpg" width="65" height="65" /></div>
<div>
新奇好玩便宜<br />
尽在网游频道</div>
</a>
<a class="saleItem" href="http://wwwjshtmlcn" target="_blank">
<div>
<img alt="展现高贵气质骑士系马靴" src="/jsimages/UploadFiles_3321/200804/20080423085516202jpg" width="65" height="65" /></div>
<div>
展现高贵气质<br />
骑士系马靴</div>
</a><a href="http://wwwjshtmlcn" target="_blank">
<div>
<img alt="摄像头集结号给你新的感觉" src="/jsimages/UploadFiles_3321/200804/20080423085516472jpg" width="65" height="65" /></div>
<div>
摄像头集结号<br />
给你新的感觉</div>
</a></div>
<div class="saleTwo">
<a class="saleItem" href="http://wwwjshtmlcn" target="_blank">
<div>
<img alt="永不过时条纹毛衣" src="/jsimages/UploadFiles_3321/200804/20080423085516984jpg" width="65" height="65" /></div>
<div>
永不过时<br />
条纹毛衣</div>
</a>
<a class="saleItem" href="http://wwwjshtmlcn" target="_blank">
<div>
<img alt="圣诞拍拍特供运动鞋2折" src="/jsimages/UploadFiles_3321/200804/20080423085516651jpg" width="65" height="65" /></div>
<div>
圣诞拍拍特供<br />
运动鞋2折</div>
</a><a href="http://wwwjshtmlcn" target="_blank">
<div>
<img alt="好感度提升韩版娃娃装" src="/jsimages/UploadFiles_3321/200804/20080423085516162jpg" width="65" height="65" /></div>
<div>
好感度提升<br />
韩版娃娃装</div>
</a></div>
<div>
<a class="saleItem" href="http://wwwjshtmlcn" target="_blank">
<div>
<img alt="精简唯美索爱K630" src="/jsimages/UploadFiles_3321/200804/20080423085516302jpg" width="65" height="65" /></div>
<div>
精简唯美<br />
索爱K630</div>
</a>
<a class="saleItem" href="http://wwwjshtmlcn" target="_blank">
<div>
<img alt="原装瑞士军刀精选" src="/jsimages/UploadFiles_3321/200804/20080423085516549jpg" width="65" width="65" height="65" /></div>
<div>
原装瑞士军刀<br />
精选</div>
</a><a href="http://wwwjshtmlcn" target="_blank">
<div>
<img alt="超薄机身索爱W880" src="/jsimages/UploadFiles_3321/200804/20080423085516711jpg" 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://wwwjshtmlcn" target="_blank">
<div>
<img alt="各就各味秋冬饮食计划" src="/jsimages/UploadFiles_3321/200804/20080423085516704jpg&type=3" width="65" height="65" /></div>
<div>
各就各味<br />
秋冬饮食计划</div>
</a><a href="http://wwwjshtmlcn" target="_blank">
<div>
<img alt="好感度提升韩版娃娃装" src="/jsimages/UploadFiles_3321/200804/20080423085516162jpg" width="65" height="65" /></div>
<div>
好感度提升<br />
韩版娃娃装</div>
</a></div>
<div class="saleTwo">
<a class="saleItem" href="http://wwwjshtmlcn" target="_blank">
<div>
<img alt="圣诞拍拍特供随身视听5折" src="/jsimages/UploadFiles_3321/200804/20080423085516375jpg" width="65" height="65" /></div>
<div>
圣诞拍拍特供<br />
随身视听5折</div>
</a><a href="http://wwwjshtmlcn" target="_blank">
<div>
<img alt="超薄机身索爱W880" src="/jsimages/UploadFiles_3321/200804/20080423085516711jpg" width="65" height="65" /></div>
<div>
超薄机身<br />
索爱W880</div>
</a></div>
<div>
<a class="saleItem" href="http://wwwjshtmlcn" target="_blank">
<div>
<img alt="我爱我家家居大抢购" src="/jsimages/UploadFiles_3321/200804/20080423085516954jpg" width="65" height="65" /></div>
<div>
我爱我家<br />
家居大抢购</div>
</a><a href="http://wwwjshtmlcn" target="_blank">
<div>
<img alt="超值彩妆套装变身派对女王" src="/jsimages/UploadFiles_3321/200804/20080423085516919jpg" width="65" width="65" height="65" /></div>
<div>
超值彩妆套装<br />
变身派对女王</div>
</a></div>
</div>
</div>
</div>
<script type="text/javascript">documentgetElementById("saleList"+saleNum)styledisplay="";</script>
<p> </p>
<p>更多网页特效代码尽在 <a href="http://wwwjshtmlcn/">网页特效代码</a></p>
</body>
</html>
这个仿拍拍基本上就是2层放，但用起来的效果还是可以的，如果不喜欢我还有下面呢，慢慢学，总会看懂的 (最重要的还是Css哦)

这个主要就是让层实现隐藏 我觉得这个在层使用方面还是好的

从总体上看，在实现层与层之间的交互，在其代码 我觉得你有必要去认真看下 ！
以上是我介绍额度菜单，虽然不是很强大，但是却很使用，而且在J2EE中
菜单基本上是一个假象，都是用层与Css之间的特效做出来的！
学会了层的具体应用，我相信你也可以有自己特色的菜单的

那我祝你好运咯！！加油！！

欢迎分享，转载请注明来源：品搜搜测评网

原文地址:https://pinsoso.cn/meirong/2188606.html

赞 (0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
搜搜发布搜搜发布管理员组
00
上一篇 2023-11-16
下一篇2023-11-16

随机推荐

  • 妮维雅小蓝罐好用吗 妮维雅小蓝罐的4种用法美容护肤

    妮维雅小蓝罐好用吗 妮维雅小蓝罐的4种用法

    妮维雅小蓝罐是一款非常经典的面霜，久经不衰，这款面霜非常的平价，50元不到，好大一罐，可以用很久，而且这个面霜的用法很多，可以护手，可以当身体乳还可以当宝宝霜。妮维雅小蓝罐好用吗妮维雅的这款面霜应该是平价面霜届的网红了。红也红了很多

    搜搜发布搜搜发布
    2024-04-15
    47700
  • 完美玛丽艳的美白精华露用过的人说下效果如何…谢谢美容护肤

    完美玛丽艳的美白精华露用过的人说下效果如何…谢谢

    使用完美玛丽艳的美白精华露的人对其效果的反馈是正面的。有人认为使用后皮肤变得更加明亮透亮，斑点有所减轻，同时肌肤补水和滋润的效果也很好，皮肤变得更加柔软细嫩。另外，这款产品的质地轻盈易吸收，味道好闻，使用时感觉很愉悦。在价格方面，相比其他品

    搜搜发布搜搜发布
    2024-04-15
    45300
  • 问一问：妮维雅小蓝罐唇膏真假如何鉴别呢？美容护肤

    问一问：妮维雅小蓝罐唇膏真假如何鉴别呢？

    妮维雅小蓝罐唇膏的鉴定妮维雅小蓝罐唇膏真假妮维雅小蓝罐唇膏真正的设计：正品上有蜂窝图案，一共8个。假货忽略了这个图标，说明口红含有蜂胶。正品口红底部的图案有花王有限公司、产地、电话、生产批号等信息。下面。仿制假货往往会有疏漏，可以参考鉴别。

    搜搜发布搜搜发布
    2024-04-15
    44800
  • 潼南定制生日礼品套盒在哪里美容护肤

    潼南定制生日礼品套盒在哪里

    在潼南定制生日礼品套盒可以考虑以下几种方式：1、在当地的商业区或购物中心寻找礼品专卖店，这些店铺通常有各种各样的礼品选择，可以根据您的需求为您提供定制服务。2、在网上寻找当地的定制礼品店，可以通过社交媒体或搜索引擎查找，一些电商平台上也有一

    搜搜发布搜搜发布
    2024-04-15
    35800
  • 韩国护肤品十大排名品牌美容护肤

    韩国护肤品十大排名品牌

    韩国十大品牌护肤品如下：1、whoo后在韩国十大护肤品品牌中，whoo荣登榜首，这个品牌将宫廷的美容秘笈与现代的东方医学相互结合，让广大的亚洲女性为之倾心。2、呼吸37度在韩国十大护肤品品牌中，起着重要的地位，它一直坚持自然美丽的概念，致力

    搜搜发布搜搜发布
    2024-04-15
    40300
  • skii一套多少钱美容护肤

    skii一套多少钱

    一般几千一套。SK2有违禁物质铬、钕严重超标！铬的危害性远远不止损伤皮肤这么简单。所有铬的化合物都有毒性，它们直接损害人体的消化道、呼吸道、皮肤和黏膜。而且，铬对人体的毒害为全身性的，除引起皮炎、湿疹、气管炎和鼻炎外，甚至可能有致癌作用。而

    搜搜发布搜搜发布
    2024-04-15
    28700
  • 妮维娅的洗面奶可以清洗掉防晒霜吗美容护肤

    妮维娅的洗面奶可以清洗掉防晒霜吗

    您好，知我药妆肌肤顾问很高兴帮助您。建议涂抹防晒后一定要每天卸妆。因为防晒剂本身是油溶性的，其中的持久配方、防水配方，洗面奶洗来如同“隔衣洗澡”，所以，先用卸妆油“以油溶油”，才能最有效、最温和地卸除干净。如果不彻底卸妆，很容易堵塞毛孔、引

    搜搜发布搜搜发布
    2024-04-15
    33400

发表评论

登录后才能评论
保存