20CN网络安全小组论坛 - 网站建设

论坛: 网站建设标题: DHTML学习

作者: wuhuan [wuhuan]

论坛用户

概述

　　DHTML这个名字也许你不会陌生吧，那么DHTML到底是什么？它能完成哪些工作呢？

　　DHTML(动态超文本语言)并不是一种结构严谨的编程语言，它只是作为浏览器自带的功能，实际上只是一种概念，它并不属于一种专门技术。DHTML运用HTML、样式表(Cascading Style　Sheets)和描述语言(js,c...)赋予网页动态交互的特征。Cascading Style Sheets (CSS) 是 DHTML 的基础。 CSS 用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning (CSS-P) 是 CSS 的一个扩展, 它可用来控制任何东西在网页上或是说在窗口中的位置。

　　因为IE4.0和Netscape4.0所宣称的DHTML标准并不完全一致,这给我们学习 DHTML带来相当困难。以下所讲的内容均已考虑IE和NS的兼容性，所列举的实例在IE及NS下均能运行,目的是方便大家学习DHTML之用,如有问题请与我们联系.

　　DHTML学习的具体内容将包含以下及部分，你可根据自己的情况有选择地阅读：

　　第1节. 介绍如何定义一个 DIV tag(layer)或说是层次以及如何用 CCS来给出它的性质；
　　第2节. 介绍如何使你编写的DHTML兼容IE和NS浏览器；
　　第3节. 显示/隐藏；
　　第4节. 元素的移动与滑动；
　　第5节. 键盘响应及鼠标控制；
　　第6节. 用 Clip 来剪裁 Layer 的可视区；
　　第7节. 叠套层次；

　　第1节. 如何定义一个层次以及如何用 CCS来给出它的性质

　　使用 DIV Tags

　　所谓层次具体而言就是指一段在 DIV 中的 HTML。换言之，当你把文字, 图象, 或其他的html文本放在 DIV 中，我们把它称作 "layer"或"层次"。

　　使用 DIV 的方法跟使用其他 tag 的方法一样

　　<DIV>
　　This is a DIV tag

　　</DIV>
　　当我们把 CSS-P 用到 DIV 中去以后，我么就可以严格设定它的位置. 首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说我们给下面这个 DIV 的名字是 menu. 设定名字的目的是方便我们在程序中用 javascript 等脚本语言来控制它，比如说移动它或改变它的一些性质等等。

　　<DIV ID="menu">
　　This is a menu

　　</DIV>
　　层次的名字是随意取的, 可以是任何英文字母和数字, 但第一个必须是字母，当然一个好的程序员都会尽可能给层次取一个与其内容相符的名字，目的是方便阅读。把 CSS-P 应用到 DIV 的方法有以下两种：

　　1.Inline CSS:
　　Inline 是最常用的方法。

　　<DIV ID="menu" STYLE="put styles here">
　　This is a menu

　　</DIV>
　　2.External STYLE tag:
　　请注意在 External 方法里, ID 和 DIV 的关系。

　　<STYLE TYPE="text/css">
　　
　　</STYLE>

　　<DIV ID="menustyle">
　　This is a menu

　　</DIV>
　　CSS 性质:
　　以下列出 NS4 和 IE4 都通用的性质，这些性质符合由 W3C 给出的标准。

　　position
　　决定 DIV tag 是如何放置的。 "relative" 意思是DIV的位置是相对于其他 tag 的。而"absolute" 是说 DIV tag 的位置是绝对位置即相对于它所在的窗口.

　　left
　　相对于窗口左边的位置 (pixels)

　　top
　　相对于窗口上边的位置 (pixels)

　　width
　　DIV tag 的宽度。

　　height
　　DIV tag 的高度。

　　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);
　　Inline Example:

　　<DIV ID="divname" STYLE="<SPAN CLASS="red">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";</SPAN>">
　　</DIV>

　　External Example:
　　<STYLE TYPE="text/css">
　　
　　</STYLE>

　　<DIV ID="divname">
　　</DIV>
第2节. 如何使你编写的DHTML兼容IE和NS浏览器
　　由于不同的浏览器中，CSS里的元素和元素的性质名字有所不同, 我们应该知道如何让你的程序在两种主要的浏览器 NS4 和 IE4 中都正常工作。
浏览器检测:
　　第一种方法：

<SCRIPT LANGUAGE="javascript">

</SCRIPT>

这样假如你要判断浏览器是否是IE 4.0以上版本，如下即可：
if ((BrowVer > 4) && (brow="ie"))
  do something

以上是从根本上实现对IE和NS的版本判定，还有一种方法虽然比较简单但足以区别 NS4 和 IE4.

　　第二种方法：

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

document.layers 是 Netscape 4 专有的，而 document.all 却是 IE 4 专有的. 如果 document.layers存在, 就让 ns4 等于 ture. 如果document.all存在，就让 ie4 等于 true. 这样，判定浏览器只需检查这两个变量就可以了。

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="xxx.jpg" WIDTH=xx HEIGHT=xx BORDER=0>
</DIV>

DIV 的名字是任意起的.可以通过 javascript 脚本来控制它. 下面就是具体方法：

对 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 的方法是设立一个变量.

if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style

　　有了block这个指针变量, 我们就可以很方便地得到或改变 CSS-P 的性质. 以下一行代码很容易地得到一个名字为 "blockDiv" 的 Div tag 的横向左边坐标值：

block.left
第3节. 显示/隐藏

下面的子程序可以让你在不同的浏览器中使用显示和隐藏的功能
<SCRIPT LANGUAGE="javascript">

</SCRIPT>
具体调用过程如下:

showObject(block)
hideObject(block)
第4节. 元素的移动与滑动
要实现元素的移动与滑动，就必须有办法取得元素的当前位置，IE和NS取得元素的方法略有差别，因为 IE 储存元素位置的时候总在值的后面加 "px". 我们可用如下方法处理：

假如你想得到

block.left (记住block是前文提到的指针变量)
你要写成：

parseInt(block.left)
　　另外，javascript 可以让你无限制的给元素添加新的性质,这给我们编程带来极大便利，就上例，每次都写 parseInt() 很麻烦，编程时我们可以把元素当前的位置记在两个新的性质xpos, ypos里：

block.xpos = parseInt(block.left)
block.ypos = parseInt(block.top)
这样, 以后你想要知道元素的位置, 只要调用 xpos 和 ypos 就行了。

通用移动子程序

moveto() Function

下面这个子程序用来移动一个元素到绝对位置 (x, y)

function moveTo(obj,x,y) {
obj.xpos = x
obj.left = obj.xpos
obj.ypos = y
obj.top = obj.ypos
}
使用这个子程序移动元素,只需赋予 layer 的指针名字和新的位置 x, y 就行了。看下面例子：

if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
block.xpos = parseInt(block.left)
block.ypos = parseInt(block.top)
如果你要把blockDiv移动到一个新的地址 (50, 100), 你可以用如下的语句完成.

moveTo(block,50,100)
moveBy() Function

下面这个子程序用来移动一个元素到相对位置 (x, y),它与 moveTo() 的区别在于它是把元素移动到相对于当前的位置 x, y，而不是窗口的坐标 x, y.

function moveBy(obj,x,y) {
obj.xpos += x
obj.left = obj.xpos
obj.ypos += y
obj.top = obj.ypos
}
比如把上述元素往右边移动 20 pixels 和往上移动 10 pixels. 你可以写成

moveBy(block,20,-10)
第5节. 键盘响应及鼠标控制

键盘响应是实现人机对话的基础。首先我们要知道如何启动一个事件 (event). 下面是启动一个把键按下的"onkeydown" 的事件.

document.onkeydown = keyDown

这里的 keyDown 是你所要编写的响应键盘的子程序。当你的浏览器读了以上的语句，它将会知道哪个键被按下了，然后启动子程序 keyDown()。确认哪个键被按下在Netscape 和 IE 有所不同。在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) {   // 判断"A"键是否被按下
slide()
}
}

function slide() {
  if (block.xpos < 400)
  {
block.xpos += 5
block.left = block.xpos
status = block.xpos       //附加功能：在状态栏显示元素的横向位置
setTimeout("slide()",30)
  }
}

启动变量
　　介绍一种方法: 用"启动变量"来控制滑动的停止和启动. 这个变量记录了元素是在动还是不动. 然后在滑动子程序里放置 "if" 语句, 根据这个启动变量的值来决定是否停止还是继续滑动.

function slide() {
  if (myobj.active) {
myobj.xpos += 5
myojb.left = myobj.xpos
setTimeout("slide()",30)
  }
}

使用 onKeyUp 和启动变量来控制滑动

onkeyup 就是 onkeydown 相反, 也就是说它用来对键起来这个事件做出反应的.
document.onkeydown = keyDown
document.onkeyup = keyUp
if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP)

下面就是一个完整的程序.

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) {
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
}
}

function slide() {
if (block.active) {
block.xpos += 5
block.left = block.xpos
setTimeout("slide()",30)
}
}

　　以上研究了键盘响应，同样道理，我们可以用鼠标来控制任何动画效果。程序几乎跟键盘控制的一样。

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

区别在于如何在链接时运用javascript的一些特性：

<A HREF="javascript:void(null)" onmouseDown="block.active=true; slide(); return false;"
onmouseUp="block.active=false" onmouseOut="block.active=false">move</A>

改变 Clip 值的通用子程序

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 区域,实际效果就变成动画效果.请看下例:

function wipe1() {
  clipBy(block,0,5,0,0)
  setTimeout("wipe1()",30)
}

我们还得加上个条件来停止 wiping,
function wipe1() {
  if (clipvalues(block,'r')<300) {
clipBy(block,0,5,0,0)
setTimeout("wipe1()",30)
  }
}

第7节. 叠套层次
　　叠套层次其实就是把子层次 DIV 写在主层次 DIV 的里面.

<DIV ID="parent1Div">
<DIV ID="child1Div"></DIV>
<DIV ID="child2Div"></DIV>

</DIV>

　　对于叠套层次, 在 DIV 里面定义 STYLE 是无法工作的, 所以我们只能用 <STYLE> 来定义叠套层次的性质.

<STYLE TYPE="text/css">

</STYLE>

<DIV ID="parent1Div">
<IMG src="child.gif" border=0>
<DIV ID="child1Div" align=right>OH!</DIV>
<DIV ID="child2Div"><center>How lovely</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 性质的初始值, 但 Microsoft 添加了一些非标准 CSS 性质:(这几个新的性质不会受到 STYLE tag 的影响.)

<UL>
<LI>pixelLeft
<LI>pixelTop
<LI>pixelWidth
<LI>pixelHeight
</UL>

　　
我们把程序做如下的修改:

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

地主发表时间: 06/14 18:55

回复: stone [stone]

论坛用户

恩！这篇文章真不错！呵呵．．．内容挺好的！大家可以都来copy一份啊！

B1层发表时间: 06/15 09:39

回复: fbi_007 [fbi_007]

论坛用户

恩确实很好啊！
多谢了！

B2层发表时间: 06/24 11:06

论坛: 网站建设