本文目录一览：
什么地JS?什么是JSP?
JS:
一种代码,英文名JAVA SCRIPT,是java 脚本语言,很多网站页面两边有小广告,那个就是JS搞的~~~
附: (JS代码大全):
1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键
table border oncontextmenu=return(false)tdno/table 可用于Table
2. body onselectstart="return false" 取消选取、防止复制
3. onpaste="return false" 不准粘贴
4. oncopy="return false;" oncut="return false;" 防止复制
5. link rel="Shortcut Icon" href="favicon.ico" IE地址栏前换成自己的图标
6. link rel="Bookmark" href="favicon.ico" 可以在收藏夹中显示出你的图标
7. input style="ime-mode:-Disabled" 关闭输入法
8. 永远都会带着框架
script language="javascript"!--
if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页
// --/script
9. 防止被人frame
SCRIPT LANGUAGE=javascript!--
if (top.location != self.location)top.location=self.location;
// --/SCRIPT
10. 网页将不能被另存为
noscriptiframe src=*.html/iframe/noscript
11. input type=button value=查看网页源代码
onclick="window.location = `view-source:`+ `";
12.删除时确认
a href=`javascript:if(confirm("确实要删除吗?"location="boos.asp?areyou=删除page=1"`删
除/a
13. 取得控件的绝对位置
//javascript
script language="javascript"
function getIE(E){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"/nleft="+l);
}
/script
//VBScript
script language="VBScript"!--
function getIE()
dim t,l,a,b
set a=document.all.img1
t=document.all.img1.offsetTop
l=document.all.img1.offsetLeft
while a.tagName"BODY"
set a = a.offsetParent
t=t+a.offsetTop
l=l+a.offsetLeft
wend
msgbox "top="tchr(13)"left="l,64,"得到控件的位置"
end function
--/script
14. 光标是停在文本框文字的最后
script language="javascript"
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart(`character`,e.value.length);
r.collapse(true);
r.select();
}
/script
input type=text name=text1 value="123" onfocus="cc()"
15. 判断上一页的来源
javascript:
document.referrer
16. 最小化、最大化、关闭窗口
object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"
param name="Command" value="Minimize"/object
object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"
param name="Command" value="Maximize"/object
OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"
PARAM NAME="Command" value="Close"/OBJECT
input type=button value=最小化 onclick=hh1.Click()
input type=button value=最大化 onclick=hh2.Click()
input type=button value=关闭 onclick=hh3.Click()
本例适用于IE
17.屏蔽功能键Shift,Alt,Ctrl
script
function look(){
if(event.shiftKey)
alert("禁止按Shift键!"; //可以换成ALT CTRL
}
document.onkeydown=look;
/script
18. 网页不会被缓存
META HTTP-EQUIV="pragma" CONTENT="no-cache"
META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"
META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"
或者META HTTP-EQUIV="expires" CONTENT="0"
19.怎样让表单没有凹凸感？
input type=text style="border:1 solid #000000"
或
input type=text style="border-left:none; border-right:none; border-top:none; border-bottom:
1 solid #000000"/textarea
20.divspanlayer的区别？
div(division)用来定义大段的页面元素，会产生转行
span用来定义同一行内的元素，跟div的唯一区别是不产生转行
layer是ns的标记，ie不支持，相当于div
21.让弹出窗口总是在最上面:
body onblur="this.focus();"
22.不要滚动条?
让竖条没有:
body style=`overflow:-Scroll;overflow-y:hidden`
/body
让横条没有:
body style=`overflow:-Scroll;overflow-x:hidden`
/body
两个都去掉？更简单了
body scroll="no"
/body
23.怎样去掉图片链接点击后，图片周围的虚线？
a href="#" onFocus="this.blur()"img src="logo.jpg" border=0/a
24.电子邮件处理提交表单
form name="form1" method="post" action="mailt****@***.com" enctype="text/plain"
input type=submit
/form
25.在打开的子窗口刷新父窗口的代码里如何写？
window.opener.location.reload()
26.如何设定打开页面的大小
body onload="top.resizeTo(300,200);"
打开页面的位置body onload="top.moveBy(300,200);"
27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动
style
body
{background-image:url(logo.gif); background-repeat:no-repeat;
background-position:center;background-attachment: fixed}
/style
28. 检查一段字符串是否全由数字组成
script language="javascript"!--
function checkNum(str){return str.match(//D/)==null}
alert(checkNum("1232142141"
alert(checkNum("123214214a1"
// --/script
29. 获得一个窗口的大小
document.body.clientWidth; document.body.clientHeight
30. 怎么判断是否是字符
if (/[^/x00-/xff]/g.test(s)) alert("含有汉字";
else alert("全是字符";
31.TEXTAREA自适应文字行数的多少
textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight"
/textarea
32. 日期减去天数等于第二个日期
script language=javascript
function cc(dd,dadd)
{
//可以加上错误处理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(A)
alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日"
}
cc("12/23/2002",2)
/script
33. 选择了哪一个Radio
HTMLscript language="vbscript"
function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
next
end function
/scriptBODY
INPUT name="radio1" type="radio" value="style" checkedstyle
INPUT name="radio1" type="radio" value="barcode"Barcode
INPUT type="button" value="check" onclick="checkme()"
/BODY/HTML
34.脚本永不出错
SCRIPT LANGUAGE="javascript"
!-- Hide
function killErrors() {
return true;
}
window.onerror = killErrors;
// --
/SCRIPT
35.ENTER键可以让光标移到下一个输入框
input onkeydown="if(event.keyCode==13)event.keyCode=9"
36. 检测某个网站的链接速度：
把如下代码加入body区域中:
script language=javascript
tim=1
setInterval("tim++",100)
b=1
var autourl=new Array()
autourl[1]="";
autourl[2]="javacool.3322.net"
autourl[3]="";
autourl[4]="";
autourl[5]="";
function butt(){
document.write("form name=autof"
for(var i=1;iautourl.length;i++)
document.write("input type=text name=txt"+i+" size=10 value=测试中…… =》input type=text
name=url"+i+" size=40 =》input type=button value=GO
onclick=window.open(this.form.url"+i+".value)br"
document.write("input type=submit value=刷新/form"
}
butt()
function auto(url){
document.forms[0]["url"+b].value=url
if(tim200)
{document.forms[0]["txt"+b].value="链接超时"}
else
{document.forms[0]["txt"+b].value="时间"+tim/10+"秒"}
b++
}
function run(){for(var i=1;iautourl.length;i++)document.write("img
src=http://"+autourl+"/"+Math.random()+" width=1 height=1
onerror=auto(http://";+autourl+"`)"}
run()/script
37. 各种样式的光标
auto ：标准光标
default ：标准箭头
hand ：手形光标
wait ：等待光标
text ：I形光标
vertical-text ：水平I形光标
no-drop ：不可拖动光标
not-allowed ：无效光标
help ：?帮助光标
all-scroll ：三角方向标
move ：移动标
crosshair ：十字标
e-resize
n-resize
nw-resize
w-resize
s-resize
se-resize
sw-resize
38.页面进入和退出的特效
进入页面meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)"
推出页面meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)"
这个是页面被载入和调出时的一些特效。Duration表示特效的持续时间，以秒为单位。Transition表示使
用哪种特效，取值为1-23:
0 矩形缩小
1 矩形扩大
2 圆形缩小
3 圆形扩大
4 下到上刷新
5 上到下刷新
6 左到右刷新
7 右到左刷新
8 竖百叶窗
9 横百叶窗
10 错位横百叶窗
11 错位竖百叶窗
12 点扩散
13 左右到中间刷新
14 中间到左右刷新
15 中间到上下
16 上下到中间
17 右下到左上
18 右上到左下
19 左上到右下
20 左下到右上
21 横条
22 竖条
23 以上22种随机选择一种
39.在规定时间内跳转
META http-equiv=V="REFRESH" content="5;URL="
40.网页是否被检索
meta name="ROBOTS" content="属性值"
其中属性值有以下一些:
属性值为"all": 文件将被检索，且页上链接可被查询；
属性值为"none": 文件不被检索，而且不查询页上的链接；
属性值为"index": 文件将被检索；
属性值为"follow": 查询页上的链接；
属性值为"noindex": 文件不检索，但可被查询链接；
属性值为"nofollow": 文件不被检索，但可查询页上的链接。
41.变换网页的鼠标光标
BODY style="CURSOR: url(`)"
42.怎样实现在任务栏显示小图标的效果？ (要使用绝对地址)
有些站点，访问时会在地址栏地址前显出小图标，添加到收藏夹后也在收藏栏中显示图标，
这样很好的与其它站点有了区别。
要达到这个效果，先需做出这个图标文件，图像为16*16像素，不要超过16色。文件格式为ico，然后上传至你的网站。
然后，在需要的页面中，加上以下html语句到文件的head和/head之间（假设以上ico文件的地址）。
link REL="SHORTCUT ICON"href="";
如果访问者的浏览器是IE5.0，就不需加任何代码，只要将图标文件上传到网站的根目录下即可。
1,META标签里的代码是什么意思？
META是放于HEAD与/HEAD之间的标记.以下是我总结它在网页中最常见的几种。
meta name="Keywords" content="图片, 新闻, 音乐, 软件"
该网页的关键字，作用于搜索引擎的登录，事实上它在现在的网站中并没什么用。
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
设定这是 HTML 文件及其编码语系，简体中文网页使用charset=gb2312，繁体中文使用charset=big5，或者不设编码也可，纯英文网页建议使用 iso-8859-1。
meta name="GENERATOR" content="Microsoft FrontPage 5.0"
这只表示该网页由什么编辑器写的。
meta http-equiv="refresh" content="10; url="
这行较为实用，能于预定秒数内自动转到指定网址。原代码中 10 表示 10秒。
2，怎么改变滚动条的颜色，只有ie5.5版本以上才能支持。
这是使用CSS语言，在次说明一下，它和我的浏览器版本有一定的关系。
scrollbar-arrow-color：上下按钮上三角箭头的颜色。
scrollbar-base-color：滚动条的基本颜色。
scrollbar-dark-shadow-color：立体滚动条强阴影的颜色
scrollbar-face-color：立体滚动条凸出部分的颜色
scrollbar-highlight-color：滚动条空白部分的颜色
scrollbar-shadow-color立体滚动条阴影的颜色。
scrollbar-track-color:#99CC33;
scrollbar-3dlight-color:#A8CBF1;
代码如下：
style
!--
BODY {
scrollbar-face-color:#99CC33;//(立体滚动条凸出部分的颜色)
scrollbar-highlight-color:#A8CBF1;//(滚动条空白部分的颜色)
scrollbar-shadow-color:#A8CBF1;//(立体滚动条阴影的颜色)
scrollbar-arrow-color:#FF9966;//(上下按钮上三角箭头的颜色)
scrollbar-base-color:#A8CBF1; //(滚动条的基本颜色)
scrollbar-darkshadow-color:#A8CBF1; //(立体滚动条强阴影的颜色)
scrollbar-track-color:#99CC33;
scrollbar-3dlight-color:#A8CBF1;
}
--
/style
在这我补充几点：
1.让浏览器窗口永远都不出现滚动条。
body style="overflow-x:hidden;overflow-y:hidden"或body style="overflow:hidden" 或body scroll=no
2，没有水平滚动条
body style="overflow-x:hidden"
3，没有垂直滚动条
body style="overflow-y:hidden"
3,如何给图片抖动怎做的.
SCRIPT language=javascript1.2
!--
var rector=2
var stopit=0
var a=1
var count=0
function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}
function rattleimage(){
if ((!document.all!document.getElementById)||stopit==1||count==100)
return
count++
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector
}
else{
shake.style.left=parseInt(shake.style.left)-rector
}
if (a4)
a++
else
a=1
setTimeout("rattleimage()",50)
}
function stoprattle(which){
stopit=1
count=0
which.style.left=0
which.style.top=0
}
//--
/SCRIPT
style.shakeimage {POSITION: relative}
/style
img src="图片的路径" onmouseout=stoprattle(this) onmouseover=init(this);rattleimage() class=shakeimage
4，在DW如何给水平线加颜色。
在DW中没有此项设置，你只能在HTML中加入代码：hr color=red noshade按F12的预览在能看到。由于在NC中不支持hr的COLOR属性，所以在DW中没有此项设置。
5，如何在网页中实现flash的全屏播放？
只要在调用swf文件的HTML中将WIDTH和HEIGHT的参数设为100％即可，当然也可以在Flash导出HTML文件的设置中进行设置，方法是：打开File菜单；选Publish Settings弹出导出设置对话框；在HTML标签下的Dimensions选项,下拉后选中Percent（百分比）,并在WIDTH 和HEIGHT框中填100.就行了。
6,为什么我在DW中插入的Flash动画缺看不找！
如果你没有正确地安装Dreamweaver和Flash，那么在你预览的时候，Dreamweaver会提示你缺少播放的插件，请你按装InstallAXFlash.exe 并从新启动计算机。现在IE6已经捆绑这个程序。
7，在Flash中，如果屏蔽鼠标右键?FS命令都是什么意思?
fscommand ("fullscreen", "true/false";（全屏设置，TRUE开，FALSE关）
fscommand ("showmenu", "true/false";（右键菜单设置，TRUE显示，FALSE不显示）
fscommand ("allowscale", "true/false";（缩放设置，TRUE自由缩放，FALSE调整画面不影响影片本身的尺寸）
fscommand ("trapallkeys", "true/false";（快捷键设置，TRUE快捷键开，FALSE快捷键关）
fscommand ("exec";（EXE程序调用）
fscommand ("quit";（退出关闭窗口）
8，Flash中什么是隐形按钮。
利用button中的hit帧来制作只有感应区域而完全透明的按钮。
9，如何给Flash动画做链接。
Dreamweaver是不能给Flash制作链接的，只能在Flash中用geturl()加链接，然后再插入Dreamweaver中。
10，DW中的层的技巧。
层是可以嵌套的，我个人给大家一个技巧，在层面板中按住CTRL再拖放层到你想去成为其子层的地方就行了，我认为这是最简单直观的方法了。
11，如何改变鼠标的形状？
在Dreamweaver4中CSS样式面板：
按CTR+SHIFT+E--出现样式表对话框,点击NEW，出现编辑对话框,在左边最后一项extensions-cursor 选择你要改的指针形式就可以了，然后把你要想改变的地方运用样式表，如果整页都有在body bgcolor="#003063" text="#ffffff" id=all中加入就行了。
span style="cursor:X`样例/span
这里选择（文本）作为对象，还可以自己改为其他的，如link等。
x可以等于=hand（手形）、crosshair（十字）、text（文本光标）、wait（顾名思义啦）、default（默认效果）、help（问号）、e-size（向右箭头）、ne-resize（向右上的箭头）、nw-resize（向左上的箭头）、w-resize（向左的箭头）、sw-resize（左下箭头）、s-resize（向下箭头）、se-resize（向右下箭头）、auto（系统自动给出效果）。
12，用CSS做邮票，看看吧！
input type=button value=我象不象邮票？ style="height:80px;border:2px dashed #cccccc"
13，经常上网的朋友可能会到过这样一些网站，一进入首页立刻会弹出一个窗口，怎么做呢！
这javascript代码即可实现，摘录蓝色论坛。
【1、最基本的弹出窗口代码】
其实代码非常简单：
SCRIPT LANGUAGE="javascript"
!--
window.open (`page.html`)
--
/SCRIPT
因为着是一段javascripts代码，所以它们应该放在SCRIPT LANGUAGE="javascript"标签和/script之间。!-- 和 --是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。
window.open (`page.html`) 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以，只是不要混用。
这一段代码可以加入HTML的任意位置，head和/head之间可以，body bgcolor="#003063" text="#ffffff" id=all间/body也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。
【2、经过设置后的弹出窗口】
下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。
我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。
SCRIPT LANGUAGE="javascript"
!--
window.open (`page.html`, `newwindow`, `height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no`)
//写成一行
--
/SCRIPT
参数解释：
SCRIPT LANGUAGE="javascript" js脚本开始；
window.open 弹出新窗口的命令；
`page.html` 弹出窗口的文件名；
`newwindow` 弹出窗口的名字（不是文件名），非必须，可用空``代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
/SCRIPT js脚本结束
【3、用函数控制弹出窗口】
下面是一个完整的代码。
html
head
script LANGUAGE="javascript"
!--
function openwin() { window.open ("page.html", "newwindow", "height=100, width=400, toolbar=
no, menubar=no, scrollbars=no, resizable=no, location=no, status=no"
//写成一行
}
//--
/script
/head
body onload="openwin()"
…任意的页面内容…
/body
/html
这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。
怎么调用呢？
方法一：body onload="openwin()" 浏览器读页面时弹出窗口；
方法二：body onunload="openwin()" 浏览器离开页面时弹出窗口；
方法三：用一个连接调用：
a href="#" onclick="openwin()"打开一个窗口/a
注意：使用的“#”是虚连接。
方法四：用一个按钮调用：
input type="button" onclick="openwin()" value="打开窗口"
14，没有用表格写的，让大家随便看看，没什么。
html
head
title江南荷花扇面/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
style type="text/css"
!--
.font1 { font-size: 12px; color: #999999; text-decoration: none}
a { font-size: 12px; color: #999999; text-decoration: none}
a:hover { font-size: 12px; color: #000000; text-decoration: none}
--
/style
/head
body bgcolor="#FFFFFF" text="#000000"
div class="font1" style="writing-mode=tb-rl;height:200px" width=300
p盛夏 尚 涛
pa href="index.htm"一夜露痕黄粉香 袁运甫 /a
p瑶池昨夜新凉 王金岭
p一朵白莲随意开 吴冠南
p新雨迎秋欲满塘 齐辛民
p十里荷香 齐辛民
p濯清莲而不妖 卢世曙
/div
/body
/html
15,IE6已支持自定义cursor!
语法格式 cursor:url(图标) //cur或是ani文件.
cur就是WINDOWS中的光标(cursor)文件，光标文件与图标（ICON)文件除了文件头有一个位置的值不同外，实际是一样的。
ani是WINDOWS中的动画光标（图标）文件。
style type="text/css"
!--
.unnamed1 { cursor:url(arrow2c.cur)}
--
/style
16,用marquee做的滚动字幕.这也我刚看到论坛的朋友在问。
语法：
align=# | top | middle| bottom //对齐方式)
BEHAVIOR=ALTERNATE | SCROLL | SLIDE //移动的方式
BGCOLOR=color//底色区域颜色
DIRECTION=DOWN | LEFT | RIGHT | UP //移动的方向
Loop=n //循环次数（默认是循环不止）
Scrolldelay=milliseconds//延时
height=# width=# //区域面积
hspace=# vspace=# //空白区域
scrollamount=# //移动的速度
marquee align=top behavior=ALTERNATE BGCOLOR=#000000 height=60 width=433 scrollamount=5/marquee
17，在FLASH5中也存在一些字体，打散后变成一团的事是为什么？有解决的办法吗。
这是大家很常见的问题！可能是对字库支持的不好！我个是做成透明的gif图片格式，然后倒入。
18，flash的网页里“加入收藏夹”功能怎么实现？
在as中加getUrl("java script:window.external.addFavorite(`,`我的工作室`)"
19，在Flash中，文本的动态属性和输入属性的区别。
input text在运行时可被用户或程序改变其值。
ynamic text仅允许被程序修改。
20,怎样在IE中调用Dreamweaver进行编辑.
相信很多在使用WinME或Window2000的朋友，会遇见是个问题。很简单，把我们笔记本程序打开，保存为一个 *.reg 文件。双击它将信息添加到注册表即可。
REGEDIT4
[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver]
[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell]
[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit]
[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit\command]
@="\"c:\\Program Files\\Macromedia\\Dreamweaver 4\\dreamweaver.exe\" \"%1\""
21，设置表格虚线。
方法一：作一个1X2的图。半黑半白，再利用表格作成线。
方法二：在css里面设，要IE5。5才支持这种效果。
style="BORDER-LEFT: #000000 1PX DASHED; BORDER-RIGHT: #000000 1PX DASHED; BORDER-TOP: #
求个简单javascript代码 谢谢，网站菜单功能
不用说自己菜不菜的，能有这个学习的精神已经很值得鼓励了
呵呵，下面，我来给你介绍几个网站常见的菜单
第一个：仿网易的滑动门导航菜单
html xmlns=""
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: 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=0;imenu.childNodes.length;i++)
menu.childNodes[i].className="sec1";
menu.childNodes[n].className="sec2";
for(i=0;imain.childNodes.length;i++)
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/html; charset=gb2312"
title网页特效代码|JsCode.CN|---经典实用的触发型导航菜单/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;isecTable.cells.length;i++)
secTable.cells
[i].className="sec1";
secTable.cells[n].className="sec2";
for(i=0;imainTable.tBodies.length;i++)
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=middleBRBR
TABLE cellSpacing=0 cellPadding=0 width=490 border=0
TBODY
TR
TD指定行做为表体。
BR注释：TBODY要素是块要素，并且需要结束标
签。BR 即使如果表格没有显式定义TBODY
要素，该要素也提供给所有表。BRBR
参考：《动态HTML参考和开发应用大全》（人民邮电出
版社
Microsoft Corporation著
北京华中兴业科技发展有限公司
译）
BRBR/TD/TR/TB
ODY/TABLE/TD/TR/T
BODY!--关于cells集合--
TBODY style="DISPLAY:
none"
TR
TD vAlign=top
align=middleBRBR
TABLE cellSpacing=0
cellPadding=0 width=490 border=0
TBODY
TR
TD检索表行或者整个
表中所有单元格的集合。BR应用于TR、TABLE。
BRBR参考：《动态HTML参考和开发应
用大全》（人民邮电出版社
Microsoft Corporation著
北京华中兴业科技发展有限公司
译）
BRBR/TD/TR/TB
ODY/TABLE/TD/TR/T
BODY!--关于tBodies集合--
TBODY style="DISPLAY:
none"
TR
TD vAlign=top
align=middleBRBR
TABLE cellSpacing=0
cellPadding=0 width=490 border=0
TBODY
TR
TD检索表中所有TBODY
对象的集合。对象在该集合中按照HTML源顺序排列。
BR应用于TABLE。BRBR参考：
《动态HTML参考和开发应用大全》（人民邮电出版社
Microsoft Corporation著
北京华中兴业科技发展有限公司
译）
BRBR/TD/TR/TB
ODY/TABLE/TD/TR/T
BODY!--关于display属性--
TBODY style="DISPLAY:
none"
TR
TD vAlign=top
align=middleBRBR
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）属性不可继承。BRBR参考：《
动态HTML参考和开发应用大全》（人民邮电出版社
Microsoft Corporation著
北京华中兴业科技发展有限公司译）
BRBRA
href="" target=_blank点击此处
/A可参阅微软A href="" target=_blankMSDN在线/A上的解释。
/TD/TR/TBODY/TABLE
;/TD/TR/TBODY/TABLEg
t;/body
/html
这里跟上面不同的区别在与这是鼠标移动和滑动的事件区别！
第三个：仿拍拍的切换效果菜单（里面的图片是我放上去的，所以会看不到图片的，呵呵 继续）
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns="" 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网页特效|网页特效代码(JsHtml.cn)---仿拍拍paipai.com首页产品图片随机轮显切换效果/titlestyle
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/saleTitle.gif") no-repeat}
#saleList{margin-top:5px}
#saleList .saleTwo{height:108px;background:url("images/salelineH.gif") bottom repeat-x;}
#saleList a{display:block;height:108px;width:86px;text-align:center;float:left;overflow: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(saleNum2) saleNum=0
else if(saleNum0) saleNum=2;
//alert(saleNum);
for(i=0;i3;i++)
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'" //aa 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="" 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="" target="_blank"
div
img alt="摄像头集结号给你新的感觉" src="/jsimages/UploadFiles_3321/200804/20080423085516472.jpg" width="65" height="65" //div
div
摄像头集结号br /
给你新的感觉/div
/aa href="" 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="" 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="" target="_blank"
div
img alt="圣诞拍拍特供运动服3折" src="/jsimages/UploadFiles_3321/200804/20080423085516802.jpg" width="65" height="65" //div
div
圣诞拍拍特供br /
运动服3折/div
/aa href="" 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="" 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="" target="_blank"
div
img alt="party扮靓甜美腮红" src="/jsimages/UploadFiles_3321/200804/20080423085516658.jpg" width="65" width="65" height="65" //div
div
party扮靓br /
甜美腮红/div
/aa href="" 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="" 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="" target="_blank"
div
img alt="展现高贵气质骑士系马靴" src="/jsimages/UploadFiles_3321/200804/20080423085516202.jpg" width="65" height="65" //div
div
展现高贵气质br /
骑士系马靴/div
/aa href="" 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="" 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="" target="_blank"
div
img alt="圣诞拍拍特供运动鞋2折" src="/jsimages/UploadFiles_3321/200804/20080423085516651.jpg" width="65" height="65" //div
div
圣诞拍拍特供br /
运动鞋2折/div
/aa href="" 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="" 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="" target="_blank"
div
img alt="原装瑞士军刀精选" src="/jsimages/UploadFiles_3321/200804/20080423085516549.jpg" width="65" width="65" height="65" //div
div
原装瑞士军刀br /
精选/div
/aa href="" 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="" target="_blank"
div
img alt="各就各味秋冬饮食计划" src="/jsimages/UploadFiles_3321/200804/20080423085516704.jpgtype=3" width="65" height="65" //div
div
各就各味br /
秋冬饮食计划/div
/aa href="" 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="" target="_blank"
div
img alt="圣诞拍拍特供随身视听5折" src="/jsimages/UploadFiles_3321/200804/20080423085516375.jpg" width="65" height="65" //div
div
圣诞拍拍特供br /
随身视听5折/div
/aa href="" 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="" target="_blank"
div
img alt="我爱我家家居大抢购" src="/jsimages/UploadFiles_3321/200804/20080423085516954.jpg" width="65" height="65" //div
div
我爱我家br /
家居大抢购/div
/aa href="" 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=""网页特效代码/a/p
/body
/html
这个仿拍拍基本上就是2层放图片，但用起来的效果还是可以的，如果不喜欢我还有下面呢，慢慢学，总会看懂的 (最重要的还是Css哦)
这个主要就是让层实现隐藏 我觉得这个在层使用方面还是好的
从总体上看，在实现层与层之间的交互，在其代码 我觉得你有必要去认真看下 ！
以上是我介绍额度菜单，虽然不是很强大，但是却很使用，而且在J2EE中
菜单基本上是一个假象，都是用层与Css之间的特效做出来的！
学会了层的具体应用，我相信你也可以有自己特色的菜单的
那我祝你好运咯！！加油！！
JS技术是什么技术？
JS技术是JavaScript脚本代码特效的简称，是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，是在HTML网页上使用，用来给HTML网页增加动态功能。
在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript，设计人员为了方便交流就去简称JS技术。
js实现网页 高度和宽度成比例的代码
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
IE，FireFox 差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
－－－－－－－－－－－－－－－－－－－
技术要点
本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。
要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在
IE下需要 深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。
Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。
Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。
document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。
实现代码
复制代码 代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
""
html xmlns=""
head
title请调整浏览器窗口/title
meta http-equiv="content-type" content="text/html; charset=gb2312"
/head
body
h2 align="center"请调整浏览器窗口大小/h2hr
form action="#" method="get" name="form1" id="form1"
!--显示浏览器窗口的实际尺寸--
浏览器窗口 的 实际高度: input type="text" name="availHeight" size="4"br
浏览器窗口 的 实际宽度: input type="text" name="availWidth" size="4"br
/form
script type="text/javascript"
!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement document.documentElement.clientHeight document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//调用函数，获取数值
window.onresize=findDimensions;
//--
/script
/body
/html
源程序解读
（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。
（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。
（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。
（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。
（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。
（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。
怎么快速的学习基本JS技术
实话说学习是没有捷径的，最多也就是有一些学习的方法和技巧。关于学习JavaScript也就是js我分享一下我这个菜鸟的学习方法，只是个人的一些看法，不喜勿喷。
1、基础要学的好
学过js的都是知道的，js的一些基础的语法和一些变成语言是不一样的，所以需要额外的注意一些基础的语法，举例来说：作用域，一般的编程语言都是全局变量函数外有效，函数内的变量函数内有效，而js是不一样的，js的全局变量函数外和函数内都有效，函数内的函数只函数内有效。还有js是基于对象的语言，但是为了支持面向对象的编程思想，js使用函数来模拟类或者是对象的概念，这些都是比较难理解的，含有一些js的地层东西如原型链、上下文等也是非常的不好理解，这就需要基础的知识一定要扎实才能行。
2、多练习和实践
其实学习编程都是这样的，多动手多思考是学习编程语言的最好办法，很多东西看起来简单但是做起来就非常难了，解决的方法是学习js要和做网页特效联系起来，毕竟js的一个很大的应用方向就是实现网页的效果和一些交互，所以学习基础的同时要试着使用原生的js代码来实现一些网页特效，从中可以学到js这门语言的博大精深。
2、学习面向对象的编程思想
虽然js对于面向对象编程的支持不是很完美，但是一些js的大神使用了一些很多的方法，如构造函数等模拟了一些比较完整的面向对象编程，所以难点也出来了，那就是js的面向对象要比其他的语言复杂难理解。
4、学习js的一些框架
使用原生的js进行开发太难了，但是我们可以通过js的框架来解决这个问题，基础的框架如jQuery，还有比较高级的框架如angularjs都是很不错的东西，只是js原生学的好，这些框架也就比较好理解了
