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

2023-04-26 01:32:02JavaScript024

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

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

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

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

<head>

<title>仿网易的滑动门技术，用DIV+CSS技术实现</title>

<!--

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

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>

</ul>

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

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

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>

<TBODY>

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

<TR>

<TBODY>

<TR>

<TD>指定行做为表体。

<BR>注释：TBODY要素是块要素，并且需要结束标

签。<BR> 即使如果表格没有显式定义TBODY

要素，该要素也提供给所有表。<BR><BR>

参考：《动态HTML参考和开发应用大全》（人民邮电出

版社

Microsoft Corporation著

北京华中兴业科技发展有限公司

译）

<BR><BR></TD></TR></TB

ODY></TABLE></TD></TR></T

BODY>

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

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

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

<head>

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

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>

<div>

圣诞浪漫饰品<br />

超级大促</div>

</a>

<div>

<div>

摄像头集结号<br />

给你新的感觉</div>

</a><a href="http://www.jshtml.cn" target="_blank">

<div>

<div>

好感度提升<br />

韩版娃娃装</div>

</a></div>

<div>

<div>

复古牛仔外套<br />

特惠119元起</div>

</a>

<div>

<div>

圣诞拍拍特供<br />

运动服3折</div>

</a><a href="http://www.jshtml.cn" target="_blank">

<div>

<div>

摄像头集结号<br />

给你新的感觉</div>

</a></div>

<div>

<div>

<div>

圣诞拍拍特供<br />

电脑周边4折</div>

</a>

<div>

<div>

party扮靓<br />

甜美腮红</div>

</a><a href="http://www.jshtml.cn" target="_blank">

<div>

<div>

好感度提升<br />

韩版娃娃装</div>

</a></div>

</div>

<div>

<div>

新奇好玩便宜<br />

尽在网游频道</div>

</a>

<div>

<div>

展现高贵气质<br />

骑士系马靴</div>

</a><a href="http://www.jshtml.cn" target="_blank">

<div>

<div>

摄像头集结号<br />

给你新的感觉</div>

</a></div>

<div>

<div>

永不过时<br />

条纹毛衣</div>

</a>

<div>

<div>

圣诞拍拍特供<br />

运动鞋2折</div>

</a><a href="http://www.jshtml.cn" target="_blank">

<div>

<div>

好感度提升<br />

韩版娃娃装</div>

</a></div>

<div>

<div>

<div>

精简唯美<br />

索爱K630</div>

</a>

<div>

<div>

原装瑞士军刀<br />

精选</div>

</a><a href="http://www.jshtml.cn" target="_blank">

<div>

<div>

超薄机身<br />

索爱W880</div>

</a></div>

</div>

<div>

<div>

各就各味<br />

秋冬饮食计划</div>

</a><a href="http://www.jshtml.cn" target="_blank">

<div>

<div>

好感度提升<br />

韩版娃娃装</div>

</a></div>

<div>

<div>

圣诞拍拍特供<br />

随身视听5折</div>

</a><a href="http://www.jshtml.cn" target="_blank">

<div>

<div>

超薄机身<br />

索爱W880</div>

</a></div>

<div>

<div>

<div>

我爱我家<br />

家居大抢购</div>

</a><a href="http://www.jshtml.cn" target="_blank">

<div>

<div>

超值彩妆套装<br />

变身派对女王</div>

</a></div>

</div>

<p></p>

<p>更多网页特效代码尽在 <a href="http://www.jshtml.cn/">网页特效代码</a></p>

</body>

</html>

这个仿拍拍基本上就是2层放图片，但用起来的效果还是可以的，如果不喜欢我还有下面呢，慢慢学，总会看懂的 (最重要的还是Css哦)

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

从总体上看，在实现层与层之间的交互，在其代码我觉得你有必要去认真看下！

以上是我介绍额度菜单，虽然不是很强大，但是却很使用，而且在J2EE中

菜单基本上是一个假象，都是用层与Css之间的特效做出来的！

学会了层的具体应用，我相信你也可以有自己特色的菜单的

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

简单，通过js判断是什么系统，如果是window，就让他正常显示，如果是电脑，可以给他来个死循环，也可以给他一个空白页，或者404,或者直接退出。

首先：navigator.userAgent，判断是手机还是电脑。

然后，手机要执行什么操作。电脑要执行什么操作。

比如说

如果是手机：window.R_vue = require()

new R_vue({})

// 因为只有手机才会存在R_vue.电脑上就会报错，阻止执行。

</script>

// 方式2：

如果是手机：

location.href = ""

如果是电脑：location.href = ""

//用户进入该网址，跳转到手机站点，如果是电脑访问，跳转到PC端。

//比如说,www.abc.comPC地址。

// m.abc.com手机端

// www.mip-abc.com mip移动加速

用户输入abc.com，就会自动识别，即使用户输入的是www.abc.com，也会跳转到m.abc.com

一、让代码简洁：一些简略的表达方式也会产生很好的优化\x0d\x0aeg：x=x+1在不影响功能的情况下可以简写为x++\x0d\x0a二、变量名方法名尽量在不影响语意的情况下简单。（可以选择首字母命名）\x0d\x0aeg：定义数组的长度可以取名为：ArrLen而不需要取为ArrayLength。\x0d\x0a三、关于JS的循环，循环是一种常用的流程控制。\x0d\x0aJS提供了三种循环：for()、while()、for(in)。在这三种循环中for(in)的效率最差，因为它需要查询Hash键，因此应尽量少用for(in)循环，for()、while()循环的性能基本持平。当然，推荐使用for循环，如果循环变量递增或递减，不要单独对循环变量赋值，而应该使用嵌套的++或_运算符。\x0d\x0a四、如果需要遍历数组，应该先缓存数组长度，将数组长度放入局部变量中，避免多次查询数组长度。\x0d\x0a因为我们常常要根据字符串、数组的长度进行循环，而通常这个长度是不变的，比如每次查询a.length，就要额外进行一个操作，而预先把var len=a.length，则就少了一次查询。\x0d\x0a五、尽量选用局部变量而不是全局变量。\x0d\x0a局部变量的访问速度要比全局变量的访问速度更快，因为全局变量其实是window对象的成员，而局部变量是放在函数的栈里的。\x0d\x0a六、尽量少使用eval。\x0d\x0a每次使用eval需要消耗大量时间，这时候使用JS所支持的闭包可以实现函数模板。\x0d\x0a七、减少对象查找\x0d\x0a因为JavaScript的解释性，所以a.b.c.d.e，需要进行至少4次查询操作，先检查a再检查a中的b，再检查b中的c，如此往下。所以如果这样的表达式重复出现，只要可能，应该尽量少出现这样的表达式，可以利用局部变量，把它放入一个临时的地方进行查询。\x0d\x0a八、字符串连接。\x0d\x0a如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。\x0d\x0a如果要连接多个字符串，应该少使用+=，如s+=as+=bs+=c应该写成s+=a + b + c；\x0d\x0a而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存。怎么用呢？使用JavaScript数组来收集，最后使用join方法连接起来，如下\x0d\x0avar buf = new Array()for(var i = 0i String() >.toString() >new String() \x0d\x0a尽量使用编译时就能使用的内部操作要比运行时使用的用户操作要快。\x0d\x0aString()属于内部函数，所以速度很快，而.toString()要查询原型中的函数，所以速度逊色一些，new String()用于返回一个精确的副本。\x0d\x0a2. 浮点数转换成整型，这个更容易出错，很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()。Math是内部对象，所以Math.floor()其实并没有多少查询方法和调用的时间，速度是最快的。\x0d\x0a3. 对于自定义的对象，如果定义了toString()方法来进行类型转换的话，推荐显式调用toString()，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高\x0d\x0a十、尽量作用JSON格式来创建对象，而不是var obj=new Object()方法。\x0d\x0a因为前者是直接复制，而后者需要调用构造器，因而前者的性能更好。\x0d\x0a十一、当需要使用数组时，也尽量使用JSON格式的语法，\x0d\x0a使用JSON格式的语法即直接使用如下语法定义数组：[parrm,param,param...],而不是采用new Array(parrm,param,param...)这种语法。因为使用JSON格式的语法是引擎直接解释的。而后者则需要调用Array的构造器。\x0d\x0a十二、对字符串进行循环操作，例如替换、查找，就使用正则表达式。\x0d\x0a因为JS的循环速度比较慢，而正则表达式的操作是用C写成的API，性能比较好。\x0d\x0a十三、插入HTML\x0d\x0a很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低，如果需要直接插入HTML，可以找一个容器元素，比如指定一个div或者span，并设置他们的innerHTML来将自己的HTML代码插入到页面中。\x0d\x0a十四、对象查询\x0d\x0a使用[“”]查询要比.items()更快\x0d\x0a十五、定时器\x0d\x0a如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval。setTimeout每次要重新设置一个定时器。\x0d\x0a十六、尽量减少DOM调用\x0d\x0a在Web开发中，JavaScript的一个很重要的作用就是对DOM进行操作。可是对DOM的操作是非常昂贵的，因为这会导致浏览器执行回流（reflow）操作。我们应该尽可能的减少DOM操作。

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：CSS样式表代码布局基础教程

# 下一篇：css中内联怎么解释？