CSS (Cascading Style Sheet).
CSS嵌套在HTML网页里用来扩展HTML的功能，可以重新定义HTML元素的显示方式。
CSS能改变的性质有字体、文字间的空间、列表、颜色、背景、Margin和位置。
1、CSS 的定义 (rules)
selector {property:value; property:value; ...}
selector: 第一种是 HTML 的 tag, 比如 P, BODY, A 等等.
第二种叫 class, 第三种叫 ID.
property: 就是那些将要被修改的性质, 比如 color
value: 给 property 的值, 比如给 color 的可以是 red
A {color: red}
用这条定义所有的联接都变成红色的了. 一般来说我们把所有的定义全包括在 STYLE 元素里面放到 HEAD 里面. 请试验下面的网页
<HTML>
<HEAD>
<STYLE>
A {color: red}
P {background-color:blue; color:white}
</STYLE>
</HEAD>
<BODY>
<A href="http://www.nease.net/~haidian">动态网页制作</A>
<P>你注意到这一段文字的颜色和背景颜色了吗?</P> 怎么样?
</BODY>
</HTML>
2、CSS Selector （HTML selector、class selector: ID selector:）
A、HTML selector
HTML selector 就是 HTML 的 tags, 比如 P, DIV, TD 等. 如你用CSS定义了它们, 在整页中, 这个Tag 的性质就按照你
的定义来显示了. HTML selector 的语法如下
tag {property:value}
比如我们想叫 H1 的颜色是红的
H1 {color: red}
这里还要告诉你 CSS 的一个特点, 它可定义好几个 selector 在一个 rule 里. 比如
H1, H2, TD {color: red}这个定义就能让所有的 H1, H2, 和 TD 的颜色都为红色.
B、Class selector
Class selector 有两种, 一种叫相关 class selector, 它跟一 个 HTML 的 tag 有关系. 它的语法是
tag.Classname {property:value}
比如我们想叫一些而不是全部 H2 的颜色是红的
<style>
H2.redone {color: red}
</style>
<H2>This is H2</H2>
<H2 class=redone>This is red H2</H2>
第二种是独立 class selector . 它可被任何 HTML tag 所应用.
它的语法如下
.Classname {property:value}
假如我们有下面这个定义
.blueone {color: blue}
那么我们可以把他应用到不同的 Tag 当中去. 比如
<style>
.blueone {color:blue}
</style>
<H2 class="blueone">Blue H2</H2>
<P class="blueone">Blue paragraph</P>
Blue H2
Blue paragraph
显然 class selector 给了我们更多的自由.
C、ID selector
ID selector 其实跟独立 class selector 的功能一样. 而区别在于它们的语法和用法不同, 以及对于 Javascript 操纵 HTML
元素有帮助. 它的语法如下
#IDname {property:value}
假如我们有下面的定义
#yelowone {color: yellow}
我们可以运用这个定义到任何的有同样 ID 名字的 tag, 比如
<style>
#redone {color: red}
</style>
<P ID="redone">text here</P>
有 ID 的 HTML 元素可以被 CSS-P 和 JavaScript 来操纵
3、CSS 控制字体
A、字形
CSS 用来控制字形的性质是 font-family. 你可以用它来决定任何一个元素中文字的字形. 比如
P.v {font-family: Verdana}
H2.a {font-family: arial}
有的时候， 你所给的字体浏览器不见得有，你可以多给几种比如
P {font-family: Verdana, Forte, "Times New Roman"}
上面这个定义可以使得浏览器先用Verdana, 如果没有就用Forte...记住每个字形之间要用逗号隔开.
B、大小
用来控制字体大小的性质是 font-size 比如
P.f12 {font-size: 12pt}
P.f18 {font-size: 18pt}
你可以自己慢慢调整字体的大小直到满意为止. 一般来说, 字体的大小没什么限制, 但 500 以下比较安全.
C、斜体
如果想让字体成为斜体, 要用 font-style 性质, 比如 P {font-style: italic}
D、加重
用 font-weight 来调节文字的粗细, 比如 P.bold {font-weight: bold}
font-style 的可能的值是 lighter, normal, bold, bolder
4、CSS 控制文字定位
line-height: 行距
text-align: 向那个方向看齐
vertical-align: 向上还是向下看齐 text-align 可以有 left, right, center, 和 justify
text-indent: 段落第一行空格
text-transform: 字母的大小写 text-transform: capitalize，uppercase和lowercase
text-decoration: 给文字加装饰, 比如下滑线 text-decoration: underline，line-through和none
5、CSS 列表的标识
有两种列表：有序和无序。有序 列表用阿拉伯数字为标识， 无序列表用黑色小圆圈来 做标识。
用 CSS 的 list-style-type 这两种列表的标识都可以有四种选择：
无序： disc, circle, square, decimal
有序： upper-roman, lower-roman, upper-alpha, lower-alpha.
假如你想叫有序列表的标识为大小罗马字母 LI.upperroman {list-style-type: upper-roman}
6、CSS 控制背景
color: 文字的颜色
background-color: 背景颜色
background-image: 背景图象
background-repeat: 重复背景图象
background-attachment: 是否冻结背景图象
P.greentext {color: green}
P.greenbg {background-color: #CCEFCC}
P.sky {background-image: url(../image/sky.jpg)}
body {background-image: url(../image/cdbk009a.jpg);
background-repeat: repeat-y}
background-repeat 可以有这些可能值：no-repeat, repeat-x, repeat-y
我们还可以用 background-attachment 来决定当别人浏览你的网页的是否让背景图象随着内容一起滚动。比如我们
如果不让背景图象动，body {background-image: url(../image/cdbk009a.jpg);
background-attachment: fixed}
7、CSS 控制边框
A、元素周边的空格 margin
性质 margin 可被用来决定周边的空格， 假如我们想让整个网页在左边有 5em 但让标题没有任何空格
BODY {margin: 5em}
H3 {margin: -5em}
H3 的负值 -5em 抵销了 BODY 5em 的空格。
另外我们还可以分别用 margin-left, margin-right, margin-top, 和 margin-bottom 来设定 左，右，上，下的空格
B、元素内部周边的空格 padding
初看起来这个性质跟 margin 好象一样，其实它们之间有很大的区别。
margin 的空格是相对于其他的元素所空的，而 padding 是在元素的周边和内部的内容所空的空格。
在下面的例子，我们用有背景颜色的 TABLE 来让你注意这个性质 TABLE.pad {padding: 5mm; background-color: #CCEFCC}
我们同样可以用 padding-left, padding-right, padding-top, 和padding-bottom 来分别控制左，右，上，下的元素内部的周边空格。
C、元素边框的宽度
我们可以用 border-width 性质来调节边框的宽度。 比如 P.width5 {border-width: 1px}这个 P 元素的边框宽度是 1 px
你可以用 border-left-width, border-right-width, border-top-width, 和 border-bottom-width 来分别决定左，右，上，下边的宽度
D、元素边框的颜色
我们可以用 border-color 性质来调节边框的颜色。 比如 P.colorred {border-color: red}这个 P 元素的边框的颜色是红色的
E、元素边框的形态
我们可以用 border-style 性质来调节边框的形态。 比如 P.inset {border-style: inset, border-width: 5px}
Cascading Style Sheets Positioning (CSS-P) 是 CSS 的一个扩展, 它可用来控制任何东西在网页上或是说在窗口中的位置.
1、CCS 和 位置设定
使用 DIV Tags
<DIV ID="truck">
This is a truck
</DIV>
Inline CSS:
<DIV ID="truck" STYLE="styles go here">
This is a truck
</DIV>
External STYLE tag:
<STYLE TYPE="text/css">
<!--
#truck {styles go here}
-->
</STYLE>
<DIV ID="truck">
This is a truck
</DIV>
Cross-Browser CSS 性质:
position
决定 DIV tag 是如何放置的。 "relative" 意思是DIV的位置是相
对于其他 tag 的。而"absolute" 是说 DIV tag 的位置是相对于它
所在的窗口. 这里主要讨论 absolute.
left
相对于窗口左边的位置 (pixels)
top
相对于窗口上边的位置 (pixels)
width
DIV tag 的宽度。 所有在 DIV 里的文字或html都在里面。
height
DIV tag 的高度。 这个性质很少用除非你想 Clip 层次。
clip
给出 layer 的 clipping (可看的见的) 部分. Clip 可使得 DIV 显示
为一个可以定义的很准确的方块。 你可以用以下的四个值来
给出这个方块的在 DIV 位置和大小。
clip:rect(top,right,bottom,left);
visibility
隐蔽或展现DIV 根据它的值 "visible", "hidden", "inherit".
z-index
DIV tag 的立体位置。 值越大 DIV 的位置越高。
background-color
DIV 背景的颜色。
layer-background-color
Netscape 的 DIV 背景颜色.
background-image
DIV 的背景图象
layer-background-image
Netscape 的 DIV 的背景图象。
CSS 的语法是用冒号来分开性质和它的值, 用半分号来分开性质:
position: absolute;
left: 50px;
top: 100px;
width: 200px;
height: 100px;
clip: rect(0,200,100,0);
visiblity: visible;
z-index: 1;
background-color:#FF0000;
layer-background-color:#FF0000;
background-image:URL(filename.gif);
layer-background-image:URL(filename.gif);
CSS 的格式比较活，不必定义所有的性质。
Inline Example:
<DIV ID="divname" STYLE="position: absolute; left: 50px;
top: 100px; width: 200px; height: 100px;
clip: rect(0,200,100,0);
visiblity: visible; z-index: 1;
background-color:#FF0000;
layer-background-color:#FF0000";">
</DIV>
External Example:
<STYLE TYPE="text/css">
<!--
#divname {position: absolute; left: 50px; top: 100px;
width: 200px; height: 100px;
clip:rect(0,200,100,0);
visiblity: visible; z-index: 1;
background-color:#FF0000;
layer-background-color:#FF0000";}
-->
</STYLE>
<DIV ID="divname">
</DIV>
2、通用 JavaScript 程序
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function check() {
if (ns4) {
// do something in Netscape Navigator 4.0
}
if (ie4) {
// do something in Internet Explorer 4.0
}
}
使用 JavaScript 和 CSS-P:
假如我们有一个如下的 DIV tag：
<DIV ID="blockDiv" STYLE="position:absolute; left:200; top:100">
<IMG SRC="../photo/jie07.jpg" WIDTH=30 HEIGHT=30 BORDER=0>
</DIV>
对 Netscape 来说， 得到 CSS-P 性质 (property) 的方法如下:
document.blockDiv.propertyName或者是 document.layers["blockDiv"].propertyName
而对于 Internet Explore 来说， 要用 blockDiv.style.propertyName或者是 document.all["blockDiv"].style.propertyName。
propertyName 可以是任何一个 DIV 可以用的 CSS－P 的性质, 比如 left, top, visibility, zIndex, width。
浏览器通用方法 (指针变量):
一个比较好的使得你的程序通用于 Netscape 和 IE 的方法是设立一个变量. 如果浏览器是 NS, 这个变量指向 document.blockDiv. 如果浏
览器是 IE. 它就指向 blockDiv.style 我们称它为指针变量。请看下面的语句.
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
你可以注意到, 有了这个指针变量, 我们以后可以用简便的方法得到或改变 CSS-P 的性质. 因为无论你用的是那种浏览器, 对于这个
DIV, 我们都用 block 来表示. 比如你想看看一个名字为 "blockDiv" 的 Div tag 的横向左边坐标是多少, 可以 block.left
一个实例
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<A HREF="javascript:alert(block.left)">left</A> -
<A HREF="javascript:alert(block.top)">top</A> -
<A HREF="javascript:alert(block.visibility)">visibility</A>
<DIV ID="blockDiv"
STYLE="position:absolute; left:50; top:100;
width:30; visibility:visible;">
<IMG SRC="block.gif" WIDTH=30 HEIGHT=30 BORDER=0>
</DIV>
</BODY>
注意: init() 子 程 序 是 在 BODY onLoad="..." 叫 的。 这 样 它 只 能 在 网 页 所 有 的 内 容 全 部 下 传 以 后 才 被 执 行.
要 不 然 会 因 为 在 有 blockDiv 之 前 而 用 它 而 造 成 网 页 错 误.
3、显示和隐蔽
Netscape 中的显示和隐蔽
在 Netscape 中显示一个元素: document.divName.visibility = "show"
隐蔽一个元素: document.divName.visibility = "hide"
请记住 divName 是你给在你网页中的一个 DIV tag 名字!
Internet Explorer 中的显示和隐蔽
在 Internet Explorer 中显示一个元素: divName.style.visibility = "visible"
隐蔽一个元素: divName.style.visibility = "hidden"
通用的显示和隐蔽
下面的子程序可以让你在不同的浏览器中使用显示和隐蔽的功能
function showObject(obj) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
}
function hideObject(obj) {
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
}
这两个子程序都用了我们上一节介绍的指针变量. 也就是说这里的
obj 由下面的语句来决定的. 你如果需要复习一下的话, 回到上一课
function ini() {
if (ns4) objectName = document.blockDiv
if (ie4) objectName = blockDiv.style
}
有了以上两个子程序, 以后当我们要显示或隐蔽元素的时候, 只要:
showObject(objectName)
或
hideObject(objectName)
这里的 objectName 就是你的指针变量, 它指向所指的 DIV tag.
请看下面一个完整的网页
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
}
function showObject(obj) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
}
function hideObject(obj) {
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<A HREF="javascript:showObject(block)">显示 show</A> -
<A HREF="javascript:hideObject(block)">隐蔽 hide</A> -
<DIV ID="blockDiv"
STYLE="position:absolute; left:50; top:100;
width:200; visibility:visible;">
<IMG SRC="../photo2/bj05.jpg" BORDER=0>
</DIV>
</BODY>
</HTML>
我们定义了一个 DIV tag. 它的名字是 blockDiv
在子程序 int() 中我们根据浏览器种类用指针变量 block 指向这个 DIV
这个 int() 子程序应该在 <BODY> 里启动，以后我们就直接采用指针变量 block 来控制这个 DIV 了.
由于 Netscape 和 Internet Explore 的显示和隐蔽用不同的值, 我们写了子程序 ShowObject(obj) 和 HideObject(obj) 来显示和隐蔽，这里的 obj 就是指针变量。
在连接里, 我们启动这两个程序来显示和隐蔽由 block 所指的 DIV
4、移动
DIV 元素的移动
给 DIV 元素一个新的地址在两种浏览器上是没有区别的. 移动一个名字为 myelement 的元素到新的位置 (100, 50), 你只要变换这个元素有关性质的值就行了.
myelement.left = 100
myelement.top = 50
但你可别忘记了这个 myelement 是一个通用指针. 它是这样得到的.
function init() {
if (ns4) myelement = document.myelementDiv
if (ie4) myelement = myelementDiv.style
}
从现在开始我们不再重复了, 在以后的课文中我们老要用到它.
尽管改变元素的位置没有兼容问题, 但得到元素的当前的位置还是有点儿不一样的. 这是因为 IE 储存元素位置的时候总在值的后面加 "px". 我们可用如下方法处理
假如你想得到myelement.left，你最好写成 parseInt(myelement.left)
比如你想把元素的左和上的位置用一个预警 (alert) 窗口告诉大家 alert(parseInt(myelement.left)+", "+parseInt(myelement.top))
给元素加新的性质
每次都写 parseInt() 好象挺烦的. 有没有好点儿的办法呢? 其实一个
简单的办法就是把它记住. JavaScript 可以让你无限制的给元素添
加新的性质. 比如, 我们把元素当前的位置记在如下两个新的性质
xpos, ypos 里
myelement.xpos = parseInt(myelement.left)
myelement.ypos = parseInt(myelement.top)
这样, 以后你想要知道元素的位置, 只要看 xpos 和 ypos 就行了. 比如 alert(myelement.xpos + "," + myelement.ypos)
通用移动子程序
下面这个子程序用来移动一个元素到位置 (x, y)
moveTo() Function
function moveTo(obj,x,y) {
obj.xpos = x
obj.left = obj.xpos
obj.ypos = y
obj.top = obj.ypos
}
这个子程序用起来很容易, 你仅仅需要告诉他 layer 的指针名字和新的位
置 x, y 就行了. 比如你有如下的 layer 指针
if (ns4) mysquare = document.mysquareDiv
if (ie4) mysquare = mysquareDiv.style
mysquare.xpos = parseInt(mysquare.left)
mysquare.ypos = parseInt(mysquare.top)
如果你要把它移动到一个新的地址 (50, 100), 你可以用如下的语句完成.
moveTo(mysquare,50,100)
moveBy() Function
这个子程序跟 moveTo() 的区别在于它是把 layer 相对于当前的位置 x, y
而不是窗口的坐标 x, y.
function moveBy(obj,x,y) {
obj.xpos += x
obj.left = obj.xpos
obj.ypos += y
obj.top = obj.ypos
}
比如把上述元素往右边移动 5 pixels 和往上移动 10 pixels. 你可以写出
moveBy(mysquare,5,-10)
下面这个程序总结了以上所有的内容
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
block.xpos = parseInt(block.left)
block.ypos = parseInt(block.top)
}
function moveTo(obj,x,y) {
obj.xpos = x
obj.left = obj.xpos
obj.ypos = y
obj.top = obj.ypos
}
function moveBy(obj,x,y) {
obj.xpos += x
obj.left = obj.xpos
obj.ypos += y
obj.top = obj.ypos
}
function showObject(obj) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
}
function hideObject(obj) {
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
Check Values:
<A HREF="javascript:alert('X: ' + block.xpos)">横向位置</A>,
<A HREF="javascript:alert('Y: ' + block.ypos)">竖向位置</A>
<BR>Visibility:
<A HREF="javascript:showObject(block)">显示</A>,
<A HREF="javascript:hideObject(block)">隐蔽</A>
<BR>移动到 MoveTo:
<A HREF="javascript:moveTo(block,100,200)">(100,200)</A>,
<A HREF="javascript:moveTo(block,200,260)">(200,260)</A>,
<A HREF="javascript:moveTo(block,300,340)">(300,340)</A>
<BR>相对移动 MoveBy:
<A HREF="javascript:moveBy(block,10,0)">(10,0)</A>,
<A HREF="javascript:moveBy(block,-10,0)">(-10,0)</A>,
<A HREF="javascript:moveBy(block,0,10)">(0,10)</A>,
<A HREF="javascript:moveBy(block,0,-10)">(0,-10)</A>
<DIV ID="blockDiv"
STYLE="position:absolute; left:100; top:200;
width:30; visibility:visible;">
<IMG SRC="../photo2/bj06.jpg" BORDER=0>
</DIV>
</BODY>
</HTML>
5、滑动
元素的滑动
滑动就是连续的移动， 我们也可以称之为动画。 而使移动连续化我们只要使用重复以及 JavaScript 的定时子程序 setTimeout() 就能达到这个目的。
而滑动的基本是相对移动一小步， 比如
block.xpos += 5
block.left = block.xpos
上面的语句往右边移动了 5 个 pixels. 然后你把重复和定时程序加上
function slide() {
if (block.xpos < 300) {
block.xpos += 5
block.left = block.xpos
setTimeout("slide()",30)
}
}
if 语句是用来给出停止滑动的条件。 在这例子中， 如果元素滑动到横向的 300 pixel 的时候，
就停止继续滑动它了。 setTimeout() 是定时器，在这用来重复移动的。
它的第一个参变量是任何 JavaScript 语句或子程序，第二个是多长时间 (万分之一秒) 以后执行第一个参变量。
在这个例子中， 它 30 万分之一秒后又去执行滑动子程序，使得元素的移动得到重复。
6、键盘控制
Capturing Keystrokes
相应敲击键是电脑和人的基本相互作用。你可以控制任何一个键的按下和松开。
首先我们先要知道如何启动一个所谓的事件 (event). 下面是启动一个把键按下的
"onkeydown" 的事件.
document.onkeydown = keyDown
这里的 keyDown 是你所要编写的相应键盘的子程序。当你的浏览器读了以上的
语句， 它将会知道哪个键被按下了，然后启动子程序 keyDown()。 子程序的名
字随你起了，在这里在子程序名字后面不需要括号。取得哪个键被按下却在
Netscape 和 IE 有所不同。
Netscape
Netscape 在处理取得哪个键被敲击的时候比较烦琐点儿。
document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)
你的 keyDown() 子程序必须传递一个隐藏的变量， 我们这里把这比变量叫 "e"，
只是因为大家都这么叫.
function keyDown(e)
这个 "e" 表示那个被按的键。 想要知道哪个键被按了， 你需要用 e 的 which
性质：
e.which
这只能告诉你这个键的内部码. 所以你还要用字串处理程序把它转成数字或字母.
String.fromCharCode(e.which)
综上所述, 我们写一个 keyDown() 子程序, 它打开一个窗口告诉哪个键被按了.
function keyDown(e) {
var keycode = e.which
var realkey = String.fromCharCode(e.which)
alert("keycode: " + keycode + "/nrealkey: " + realkey)
}
document.onkeydown = keyDown
ocument.captureEvents(Event.KEYDOWN)
Internet Explorer
IE 的语句比较简单一些. 但它不是用 e.which而是用 window.event.keyCode
来取得被按的键的值.
function keyDown() {
var keycode = event.keyCode
var realkey = String.fromCharCode(event.keyCode)
alert("keycode: " + keycode + "/nrealkey: " + realkey)
}
document.onkeydown = keyDown
兼容两者
你如果在你的机器上试验了上述两种浏览器, 你会发现所显示的 realykey 值不见得一样. 这是因为它们用的不同的字码. 这点很糟糕, 我们将无法把它们统一起来.
也就是说, 我们必须写不同的语句为不同的浏览器. 所以说我们干脆不再考虑键的真码 real key value 而只考虑键的内码 key code.
下面的语句对次做出如下的调整. 如果用的是 Netscaep, 变量 nKey 将会得到 key
code, 而让 ieKey 为 0. 相反, 如果用的是 IE, ieKey 为 key code 而 nKey 为 0:
function keyDown(e) {
if (ns4) {var nKey=e.which; var ieKey=0}
if (ie4) {var ieKey=event.keyCode; var nKey=0}
alert("nKey:"+nKey+" ieKey:" + ieKey);
}
document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)
用键盘移动元素
假如你想用键盘来启动你的滑动, 你需要先知道哪个键被按了, 然后用相应的子程序
来滑动元素. 下面我们准备用 "A" 键来启动滑动子程序. Netscape 的 "A" 是 97.
而 IE 是 65. 也就是说, nKey 为 97 而 ieKey 为 65.
function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
block.xpos = parseInt(block.left)
document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)
}
function keyDown(e) {
if (ns4) {var nKey=e.which; var ieKey=0}
if (ie4) {var ieKey=event.keyCode; var nKey=0}
if (nKey==97 || ieKey==65) { // if "A" key is pressed
slide()
}
}
function slide() {
if (block.xpos < 300)
{
block.xpos += 5
block.left = block.xpos
status = block.xpos // not needed, just for show
setTimeout("slide()",30)
}
}
启动变量
毫无疑问, 你注意到在上一个范例中, 一但滑动就停不下来了直到终点. 我们
这里介绍一种方法: 启动变量, 来控制滑动的挺和启动. 这个变量记录了元素
是否在动还是不动. 然后在滑动子程序里放置 "if" 语句, 根据这个启动变量
的值来决定是否停止还是继续滑动.
function slide() {
if (myobj.active) {
myobj.xpos += 5
myojb.left = myobj.xpos
setTimeout("slide()",30)
}
}
上面这个滑动子程序只有当变量 myobj.active 等于 true 的时候才继续要不
然, 就不在滑动了. 显然现在的滑动子程序比较聪明了.
使用 onKeyUp 和启动变量来控制滑动
onkeyup 就是 onkeydown 相反, 也就是说它用来对键起来这个事件做出反应的.
document.onkeydown = keyDown
document.onkeyup = keyUp
if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP)
keyUp() 子程序当然也是由你来写的. 在这里, 我们想让它在被按下的键松开的时候
它能停止元素的滑动. 也就是是说把那个启动变量设置为 0 就行了.
function keyUp(e) {
if (ns4) var nKey = e.which
if (ie4) var ieKey = window.event.keyCode
if (nKey==97 || ieKey==65) block.active = false
}
下面就是一个完整的程序. 不知道你是否看懂的它. 在 keyDown 子程序里, 用了变量
block.active. (! = NOT), 使得 keyDown 只当元素不动的时候才启动 slide 子程序. 而
slide 子程序里, 我们也用到 if (block.active) 语句, 使得只有当 block.active 的值是
true 的时候才滑动元素.
function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
block.xpos = parseInt(block.left)
block.active = false
document.onkeydown = keyDown
document.onkeyup = keyUp
if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP)
}
function keyDown(e) {
if (ns4) {var nKey=e.which; var ieKey=0}
if (ie4) {var ieKey=event.keyCode; var nKey=0}
if ((nKey==97 || ieKey==65) && !block.active) { // if "A" key is pressed
block.active = true
slide()
}
}
function keyUp(e) {
if (ns4) {var nKey=e.which; var ieKey=0}
if (ie4) {var ieKey=event.keyCode; var nKey=0}
if (nKey==97 || ieKey==65) {
block.active = false // if "A" key is released
}
}
function slide() {
if (block.active) {
block.xpos += 5
block.left = block.xpos
status = block.xpos // not needed, just for show
setTimeout("slide()",30)
}
}
两个浏览器用的不东的字码集. 各有各的特点. 比如 Netscape 可以 区别大小写而 IE 就不成. 但 IE 却能知道项 Ctrl, Shift, Alt, arrow keys 而 Netscape 却
不行. 总的来说, 用字母, 数字, 空格是没问题的.
7、鼠标控制
鼠标点击控制
跟键盘控制一样，我们可以用鼠标来控制任何动画效果。 下面我们将要设立一个连接， 当拿鼠标按这个连接的时候， 元素就能滑动，
当你放开鼠标的时候，滑动就停止了。程序几乎跟键盘控制的一样。
function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
block.xpos = parseInt(block.left)
block.active = false
}
function slide() {
if (block.active) {
block.xpos += 5
block.left = block.xpos
setTimeout("slide()",30)
}
}
区别在于如何做这个连接， 请看下面的语句：
<A HREF="javascript:void(null)" onMouseDown="block.active=true; slide(); return false;"
onMouseUp="block.active=false" onMouseOut="block.active=false">move</A>
这里解释一下上面的连接:
HREF="javascript:void(null)" 告诉浏览器不要换网页。 我们也可以用 HREF="#"来达到这个目的.
onMouseDown 把变量 block.active 设为 true, 然后启动 slide()滑动元素。
onMouseUp 把变量 block.active 设为 false, 这样滑动就停止了。
onMouseOut 把变量 block.active 设为 false, 这样滑动就停止了。
8、用 Clip 来剪裁 Layer 的可视区
Clipping Layers
Clipping 的意思就是决定元素的哪个部位可以被看到. 就像一个模子一样. 它不会改变任何元素的性质. Clipping 的区域是一个长方形. 而这个长方形
的尺寸取决于于四个边的位置. 这四个边用 top, right, botton, left 来表示. 请注意这四个边的位置是相对于元素的而不是相对于窗口的.
Clipping 的 CSS 语法是 clip:rect(top,right,bottom,left)
这里 top, right, bottom, left 的值全是 pixels. 注意它们的位置是固定的. 下面的 DIV 元素就被 Clipping 来重新确定了可视范围.
<DIV ID="blockDiv" STYLE="position:absolute; left:50;
top:80; width:100; height:70; clip:rect(-15, 15, 85, 85);
background-color:#FF0000;
layer-background-color:#FF0000;">
</DIV>
在上面这个例子中,
上边可视区域比原来扩大 15 格, 因为 top = -15
右边可视区域比原来小了 15 格, 因为 right = 15
下边可视区域比原来扩大 15 格, 因为 bottom = 85, 而元素高度是 70
左边可视区域比原来小了 15 格, 因为 right = 85, 而元素宽度是 100
在上面这个例子, 有两个性质需要解释一下. background-color 是专为 ie4
而 layer-background-color 是为 Netscape. 这个性质是设立 DIV 背景颜色.
一般我们不需要给出 DIV 的 height. 但如果要用 Clipping, 那你最好给.
你也可y以给 DIV 元素设置背景图象, background-image:URL(filename.gif) 是为IE所设, 而 layer-background-image:URL(fildname.gif). 是为 Netscape.
但 Netscape 需要另外一个性质 repeat:no. 请看下面的例子
<DIV ID="blockDiv" STYLE="position:absolute; left:50; top:80;
width:100; height:50; clip:rect(-10,110,60,-10);
background-image:URL(filename.gif);
layer-background-image:URL(filename.gif); repeat:no;}
JavaScript 和 Clipping
我们已经知道了用 clipping 的四个值来决定一个元素的可视区. 同改变元
素位置一样, 我们也可以用 JavaScript 来改变这四个值.
Netscape 的 Clipping:在 Netscape, 你可以用下面这四个性质来取得 Clipping
document.divName.clip.top
document.divName.clip.right
document.divName.clip.bottom
document.divName.clip.left
比如你想要把 Clipping 的 top 显示在屏幕上, 你可以用 alert:
alert(document.divName.clip.top)
你如果想改变 top 的值到 50 pixels, 你可以
document.divName.clip.top = 50
Internet Explorer 的 Clipping:
IE 可以用一个性质得到所有四个 Clipping 的值, 比如
alert(divName.style.clip)
这句的结果将是
"rect(0px 50px 100px 0px)"
当你想改变 Clipping 的值的时候, 你也需要把这四个值一起改动. 烦!
divName.style.clip = "rect(0px 100px 50px 0px)"
通用子程序 clipValues()
这个子程序是用来得到其中一个 Clipping 的值的.
function clipValues(obj,which) {
if (ns4) {
if (which=="t") return obj.clip.top
if (which=="r") return obj.clip.right
if (which=="b") return obj.clip.bottom
if (which=="l") return obj.clip.left
}
else if (ie4) {
var clipv = obj.clip.split("rect(")[1].split(")")[0].split("px")
if (which=="t") return Number(clipv[0])
if (which=="r") return Number(clipv[1])
if (which=="b") return Number(clipv[2])
if (which=="l") return Number(clipv[3])
}
}
你只要告诉这个子程序哪个 layer 的哪条边, 它就能告诉你那条边的
Clipping 的值. 假如我们给一个 Layer 设立了一个指针变量 "blockDiv",
我们就可以用下面的语句来显示 top 的 clipping 的值
alert(clipValues(block,"t"))
这里我们用了这样的表示法 "t" (top), "r" (right), "b" (bottom), "l" (left).
改变 Clip 值的通用子程序
clipTo() 子程序:
clipTo() 让你能重新 Clip 一个 Layer 到给定的值
function clipTo(obj,t,r,b,l) {
if (ns4) {
obj.clip.top = t
obj.clip.right = r
obj.clip.bottom = b
obj.clip.left = l
}
else if (ie4) obj.clip = "rect("+t+"px "+r+"px "+b+"px "+l+"px)"
}
用它的时候, 你要给出 Layer 的名字和四个边的 Clip 的值, 比如
clipTo(block,0,100,100,0)
clipBy() 子程序:
clipBy() 可以让你相对于当前的 Clip 区域增减 Clip 的四个边
function clipBy(obj,t,r,b,l) {
if (ns4) {
obj.clip.top = clipValues(obj,'t') + t
obj.clip.right = clipValues(obj,'r') + r
obj.clip.bottom = clipValues(obj,'b') + b
obj.clip.left = clipValues(obj,'l') + l
}
else if (ie4)
obj.clip = "rect("+(this.clipValues(obj,'t')+t)+
"px "+(this.clipValues(obj,'r')+r)+"px "
+Number(this.clipValues(obj,'b')+b)+"px "
+Number(this.clipValues(obj,'l')+l)+"px)"
}
比如你想稍微增大 right 和 bottom 边的值, 你可以
clipBy(block,0,10,5,0)
动画 Clipping (Wiping)
所谓 wiping 就是连续相对改变 clipping 区域. 下面这个子程序就是往右边
逐步扩大 clipping 区域, 每次 5 pixels.
function wipe1() {
clipBy(block,0,5,0,0)
setTimeout("wipe1()",30)
}
我们还得加上个条件来停止 wiping,
function wipe1() {
if (clipValues(block,'r')<200) {
clipBy(block,0,5,0,0)
setTimeout("wipe1()",30)
}
}
9、叠套层次
叠套层次
元素, 层次, Layer 这三个词是我们在教程经常用的. 它们是一个意思: 就是一段在 <DIV> 里的 HTML. 而所谓叠套层次就是层次里面
套层次, 或是 netsting layers. 我们把在一个层次里的层次叫子层次, 而把包括子层次的层次叫主
层次. 子层次的位置全是相对于主层次的. 打个比喻, 主层次对子层次的关系就像窗口对主层次的关系.
我们以后会发觉叠套层次会给我们带来一些方便. 这是因为子层次的位置是相对于主层次的. 也就是说当我们移动主层次的时候, 子
层次也随着移动.
用 JavaScript 来实现层次套层次在 NetScapt 和 Internet Explorer 是大不相同. 这就是为什么我们很少看到层次套层次的例子. 这里我们
将要提供一个方法去实现兼容的层次重叠.
Stylesheets 和叠套
叠套层次其实就是把子层次 DIV 写在主层次 DIV 的里面.
<DIV ID="parent1Div">
<DIV ID="child1Div"></DIV>
<DIV ID="child2Div"></DIV>
</DIV>
对于叠套层次, 在 DIV 里面定义 STYLE 是无法工作的, 所以我们只
能用 <STYLE> 来定义叠套层次的性质.
<STYLE TYPE="text/css">
<!--
#parent1Div {position:absolute; left:100; top:80; width:500; height:347;
clip:rect(0,500,347,0);
background-color:#C0C0C0; layer-background-color:#C0C0C0;}
#child1Div {position:absolute; left:-20; top:200; width:70; height:70;
clip:rect(0,70,70,0);
background-color:#FF0000; layer-background-color:#FF0000;}
#child2Div {position:absolute; left:100; top:280; width:300; height:60;
clip:rect(0,300,60,0);
background-color:#CCFFCC; layer-background-color:#CCFFCC;}
-->
</STYLE>
<DIV ID="parent1Div">
<IMG src="../picture/bj01_tiantan.jpg" border=0>
<DIV ID="child1Div"></DIV>
<DIV ID="child2Div"><center>北京天坛祈年殿</center></DIV>
</DIV>
点这里看上面的例子.
在上面的例子里我们还定义了可视区. 一般来说你应该定义可视区和颜色. 我们这个例子里, 主层次是天坛照片, 第一个子层次是个红
色方形, 第二个子层次是绿色长方形, 上有照片说明. JavaScript 和叠套
JavaScrip 在 Netscape 和 Internet Explore 里操纵叠套是大不一样的.
在 IE 里处理叠套层次和处理一般层次没有什么区别.childLayer.style.properyName
但是对 Netscape 来说, 如果你想操纵子层次你必须参照它的主层次.
document.parentLayer.document.childLayer.propertyName
这里的在 layer 名字之前的 document 是因为 Netscape 把 layer 看做 document. 另外你所要知道的是叠套的层次是没有限制的, 也就是说
你可以叠套无数层. 比如我们把上面的例子里的第二个子层次放到第一个子层次里.
<DIV ID="parent1Div">
<DIV ID="child1Div">
<DIV ID="child2Div"></DIV>
</DIV>
</DIV>
在这个情况下, 想要操纵 child2Div, 你得
document.parent1Div.document.child1Div.document.child2Div.propertyName
我们现在可以来为这些层次定义指针变量
function init() {
if (ns4) {
parent1 = document.parent1Div
child1 = document.parent1Div.document.child1Div
child2 = document.parent1Div.document.child2Div
}
if (ie4) {
parent1 = parent1Div.style
child1 = child1Div.style
child2 = child2Div.style
}
}
但我们还要处理一些其他的问题.
IE 的麻烦和处理:
当你用 STYLE tag 来定义你的 Layer 的时候, IE 居然让你读不出来Layer 性质的初始值. 比如你想知道 parent1 刚开始的位置:
alert(parent1.left)在 IE 里你将什么也得不到. 但当你用 JavaScript 改变了这些性质的
值以后, 你就能看到它们的值了. 这个问题显然使得我们无法知道元素的初始位置, 也就是说无法去准确的控制它了.
但 Microsoft 添加了一些非标准 CSS 性质在 IE4 里可以使得我们能解决这个麻烦.
pixelLeft
pixelTop
pixelWidth
pixelHeight
在 IE4 里, 这几个新的性质不会受到 STYLE tag 的影响. 所以我们可
把程序做如下的修改使得我们能记住初始位置.
function init() {
if (ns4) {
parent1 = document.parent1Div
parent1.xpos = parent1.left
parent1.ypos = parent1.top
child1 = document.parent1Div.document.child1Div
child1.xpos = child1.left
child1.ypos = child1.top
child2 = document.parent1Div.document.child2Div
child2.xpos = child2.left
child2.ypos = child2.top
}
if (ie4) {
parent1 = parent1Div.style
parent1.xpos = parent1.pixelLeft
parent1.ypos = parent1.pixelTop
child1 = child1Div.style
child1.xpos = child1.pixelLeft
child1.ypos = child1.pixelTop
child2 = child2Div.style
child2.xpos = child2.pixelLeft
child2.ypos = child2.pixelTop
}
}
这样你就可以像以前那样很方便的改变 layer 的位置了.
可视性质和叠套:
如果你忘记了给出子层次的可视性质, 它将会使用主层次的可视性质.
Rewrite Layer Content 变换层次中的内容
--------------------------------------------------------------------------------
当你用 <DIV> 设立一个层次以后， 你可以把它放到屏幕上的任何一个地方。
但有没有办法更换里面的内容呢？ 这一节就是介绍如何更换层次里面的内容。
Internet Explorer 4.0:
用 Explorer 很容易实现层次内容的更换。下面的语句就可以让你随意的更换层次里的内容。
document.all.divID.innerHTML = "任何HTML或文字"
这个语句中的 divID 是你想要更换内容的 DIV 的 ID。 另外，你可以用另一种方法实现同样的功能
document.all["divID"].innerHTML = "任何HTML或文字"
而第二种方法更方便于我们写通用的网页。
Netscape Navigator 4.0:
用 Netscape 就稍微麻烦点。 每个层次在 Netscape 里本身就是一个document.
所以可用 document.write() 命令就能把你想要写的东西写到层次里。 但注意要用
document.open() 和 document.close() 打开和关闭层次。比如往网页里写东西
document.open()
document.write("my text here")
document.close()
如果要往层次里写东西，要加上层次的 ID
document.layers["divID"].document.open()
document.layers["divID"].document.write("my text here")
document.layers["divID"].document.close()
通用程序
把上面所讨论的合在一起，我们可以写出一个通用的改换内容的子程序
function layerWrite(id,nestref,text) {
if (ns4) {
var lyr;
if (nestref) {
lyr = eval('document.'+nestref+'.document.'+id+'.document')
else
document.layers[id].document
lyr.open()
lyr.write(text)
lyr.close()
}
else if (ie4) {
document.all[id].innerHTML = text
}
}
在你的网页里用这个子程序就可以更换内容。
layerWrite("mylayer",null,"my text here")
Create Menu Bar
--------------------------------------------------------------------------------
用 JavaScript 来产生菜单可给你省很多事。比如你有好几个网页但都用一样的菜单。另外改动的时候也很方便。只要改一个地方就行了。
如何运用数组和如何用JavaScript来产生HTML。
数组
JavaScript 的数组很灵活，你可用下面的命令产生它
var yourArray = new Array();
这个数组是可以任意扩张的。 也就是说， 它里面的元素可以随时
添加。 比如yourArray[0] = "first element";
其他的 JavaScript code ：yourArray[1] = "second element"
你可注意到数组的第一个元素从零开始。这个规则和 C 里面的数组一样。
当你想要知道到底有多少元素在这个数组里的时候，你可以用yourArray.length
document.writeln
document.writeln() 是用来把字串写到网页上。但它另外一个很重要的功能是它可以动态的产生HTML。
请看下面的原码document.writeln("<H1>DHTML Builder</H>");
就是把一个题目写在网页上。 你可能觉得干吗不直接写就行了呢。
用JavaScript来写HTML的优点是你可以动态的来产生HTML。
菜单原码
下面就是自动产生菜单的原码。你可把它拷贝到一个文件中比如menubar.js
然后修改menuName 和 menuUrl 数组里的元素内容根据你自己的需要。你可以增加或减少元素。
你如果要改底色，只要修改 bgcolor 就行了。 而宽度可以用width 来改变。
在你调用他的时候，只要写下面的语句就行了
<SCRIPT src="menubar.js"></SCRIPT>
<SCRIPT>createMenuBar("DHTML Home");</SCRIPT>
// Background color of menu bar
var bgcolor = "#FFFFCC"
var width = 500
// Link names
var menuName = new Array();
menuName[0] = "DHTML Home";
menuName[1] = "Book";
menuName[2] = "Daily";
menuName[3] = "Emacs";
menuName[4] = "Photoshop";
// Links
var menuUrl = new Array();
menuUrl[0] = "index.html";
menuUrl[1] = "book.html";
menuUrl[2] = "daily.html";
menuUrl[3] = "emacs.html";
menuUrl[4] = "photoshop.html";
// Produce menu bar
function createMenuBar(pageName) {
document.writeln("<style> H3 {font-size:16pt} </style>");
document.writeln("<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=" + width + ">");
document.writeln("<tr><td bgcolor=#669900>");
document.writeln("<table border=0 cellspacing=1 cellpadding=1 width=100% ");
document.writeln("bgcolor=" + bgcolor + "><TR>");
for (i = 0; i < menuName.length; i++) {
if (pageName == menuName[i]) {
document.writeln(" <TD align=center><FONT color=FF9900><B>");
document.writeln(menuName[i] + "</B></FONT></TD>");
}
else {
document.writeln("<TD align=center><a href=" + menuUrl[i] + ">"
document.writeln(menuName[i] + "</A></TD>");
}
}
document.writeln("</TR></TABLE></TD></TR></TABLE>");
}
Manipulate Frames 框架的操作
--------------------------------------------------------------------------------
这里我们主要回答两个常碰到的问题
1. 如何让你的网页从别人的框架里扩展到整个窗口
2. 如何使得你的网页进入框架机构
这里我们主要讨论大家常用的框架结构：一个左框架用做菜单一个右框架用做内容。
如何让你的网页从别人的框架里扩展到整个窗口
请考虑下面这种情况：假如你的网页做为别人网页的一个连接。但当访问者点击连接时，你的网页被展现在右边的框架中。
而且你的网页也是有左右两个框架。这时候访问者会看到三个框架。最左边是别人的菜单框架，
中间是你的菜单框架，右边是你的内容框架。
这里就告诉你如何让你的网页占据整个窗口。也就是说 break 别人网页的框架结构。
在你的网页里你只需要检查是否你的网页在整个框架结构中的最高位置。如果不是在最高的位置，就替换最高位置里的内容为你的网页。
请把如下的 Javascript 放到你网页中的 <HEAD> 中。
<SCRIPT>
if (top.location != this.location) {
top.location = this.location;
}
</SCRIPT>
你如果了解DOM， 你就知道这里的 top 是指的是框架的最高层，而 this是指的你网页所在的框架。
如何使得你的网页进入框架机构跟上面的情况相反的是搜寻机找到你的一个网页但不知道它只是你网页的右边部分。
这样访问者只能看到你网页的部分内容。下面的语句可以让你克服这个毛病
<SCRIPT>
if (top.location == this.location) {
top.location.href = "index.html";
}
</SCRIPT>
这里的 index.html 是你的首页。
窗口的操作
--------------------------------------------------------------------------------
简介
用 JavaScript 很容易用一个窗口来控制另一个窗口中的内容。唯一的要求是这两个窗口必须有父子关系。
也就是说，一个窗口必须是由另外一个窗口来打开的。 通过这一课，你将会
打开一个窗口
连接主窗口和子窗口
用主窗口来控制子窗口
用子窗口来控制主窗口
打开一个新窗口
你可以 JavaScript 的函数 window.open( ) 来打开一个窗口， 比如 window.open("adv04_win2.htm", "newWin1");
其中第一个参数是子窗口里的网址。第二个参数是子窗口的名字。另外你还可以用第三个参数来定义子窗口的性质。 比如
window.open("adv04_win2.htm", "newWin1", "toolbar=no,width=700,height=500");
上面一句是打开一个宽 700 高 500 没有工具条的子窗口。
连接主窗口和子窗口
虽然你已经让主窗口打开了一个子窗口，可是它们之间谁也不认识谁。当然也无法互相控制了。 幸运的是我们可以用 JavaScript 的变量来记住对方或
是说用变量来明确它们之间的父子关系。现在假定我们主窗口的文件名字叫 adv04_win1.htm， 子窗口的文件名字叫 adv04_win2.htm。
在主窗口里，在打开子窗口的时候，我们用于个变量，比如 childWin 来记住子窗口
childWin = window.open("adv04_win2.htm", "childWin");
这样， childWin 就代表子窗口了。紧接着这一行，我们用子窗口 childWin的一个变量， 比如 parentWin 来记住主窗口
childWin.parentWin = this;
这里的 this 是一个很有意思的特殊变量 ，它代表当前的窗口或框架。现在主窗口和子窗口都已经知道了对方。下面我们就告诉你如何来控制对方。
用子窗口来控制主窗口
在子窗口里，我们可以用变量 parentWin 来控制主窗口。这里我们简单的介绍一下如何变换主窗口里面的网页。当然你可以控制主窗口里面的其他物体
就象你在主窗口里控制它们一样 ，区别是要加上 parentWin. 在物体和元素的前面。
如果你想要更换主窗口里面的网页，用下面的语句就可达到 parentWin.location = "new.htm";
更具体一些， 在子窗口里写一个如下的连接<A href="#" onClick="javascript:parentWin.location='new.htm'">新页</A>
用主窗口来控制子窗口
同样道理 ，你也可以用主窗口里面的子窗口变量来控制子窗口。 比如你想
要更换子窗口里面的网页，用下面的语句就可达到 childWin.location = "new.htm";
更具体一些， 在主窗口里写一个如下的连接<A href="#" onClick="javascript:childWin.location='new.htm'">新页</A>
