主题:  （转载）一个不错的DHTML实例教程

康夫
职务：普通成员
等级：5
金币：3.0
发贴：3311
#12004/4/16 12:56:37
这是我在经典论坛精华集上看到的，如果大家觉得不错，我就继续贴。

(注:原作者未知 来源:动态WEB脚本技术论坛)

　 如果您是HTML的初学者，请您先自学HTML。因为DHTML是现有的HTML技术的一个综合，所以HTML语言对学习动态HTML是非常重要的。
自从HTML 4.0出现以后，引入了“层叠样式表”(CSS),于是网页制作者能够随心所欲地对自己的网页进行外观和动态的设计，并且使网页具有交互性。其实动态Html（DHtml）并不是一种专门的技术，而是Html技术的一个综合，说白了就是一种技巧，但往往是这样或那样的小技巧使我们的网页变得更加好看、实用。好了，废话少说，下面开始以实例来说明动态HTML在网页设计中的应用。

例1 使用<style>和</style>标志对修饰文本
<html>
<head>
<title>DHtml举例1</title>
<style>
h2 {font-family:"宋体";color:"blue";font-size:"12pt";text-align:"center"}
</style>
</head>
<body>
<h2>被修饰文本</h2>
</body>
</html>

本例中，我们使用了<style>和</style>标志对来修饰文本，请留意蓝色字，<style>和</style>标志对是加在<head>和</head>标志对之间的，而加上<!--和-- >是为了让不支持<style>和</style>标志对的浏览器跳过样式表，否则可能会出错。本例先对< h2>< /h2>标志对中的文本样式在< style>和< /style>标志对中进行定义，于是在后边<h2></h2>中就依样式表定义的内容对文本进行修饰。font-family定义字体，font-size定义字体大小，text-align定义文本对齐方式，color定义前景颜色。

除此之外，我们还可以采用另一种方法来实现。请看下边的例子。

例2 直接用style属性修饰文本
<html>
<head>
<title>DHtml举例2</title>
</head>
<body>
<h2 style="font-family:'宋体';color:blue;font-size:12pt;text-align:center">被修饰文本</h2>
</body>
</html>

请务必注意font-family后是用单引号来定义字体的（font-family:'宋体'）。好了，现在您已经初步掌握了样式单的用法了，明天我们开始让您的主页动起来。



康夫
职务：普通成员
等级：5
金币：3.0
发贴：3311
#22004/4/16 12:57:18
Dhtml实例教程（二）
例3 使用鼠标触发事件和动态样式表改变文本
<html>
<head>
<title>DHtml举例3</title>
</head>
<body>
<h2 onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='underline'" style="font-size:12;text-align:center">请将鼠标移到上面！</h3>
<br>
<h3 align="center" onmouseover="this.style.color='red'" onmouseout="this.style.color='green'">我是变色龙！</h3>
</body>
</html>

在这个例子中,当您把光标放在文字上时,onmouseover事件将被触发，于是执行其后的style定义，此时文字下加了一条直线（this.style.textDecoration='underline'的作用），this用来指代当前的对象，即
标志对。当您把光标移开文字时onmouseout事件被触发，此时文字下的直线消失了（this.style.textDecoration='underline'的作用），这样网页就有了动态的效果。同理，我们可以通过触发鼠标事件来改变文本的颜色，如上例中的第二行黑体字所示。
再次提醒读者，在使用样式单的时候一定要注意格式。比如，在< style>< /style>标志对中进行样式单定义时应使用text-decoration:underline，而不是用textDecoration='underline'来修饰文本，后者是用于事件触发中的（如onmouseover或onmouseout事件）。许多CSS属性的名字中都有连字符(像text-decoration)，但是连字符在许多脚本语言（如javascript）中是不合法的标识符，因此，在HTML或样式表中指明CSS属性的时候用连字符命名方式，但在作为一个脚本属性时，就必须去掉连字符，并将它后面的第一个字母大写。例如：
text-decoration变为textDecoration、background-color变成backgroundColor、margin-top变成marginTop。
您可能想用鼠标点击文本来改变其的颜色，要做到这一点很简单，只要在onclick事件中定义样式即可，onclick的用法与onmouseover、onmouseout相似。请看明天连载三的例子。



康夫
职务：普通成员
等级：5
金币：3.0
发贴：3311
#32004/4/16 12:58:13
Dhtml实例教程（三）

例4 使用onclick动态改变字体的颜色
<html>
<head>
<title>DHtml举例4</title>
</head>
<body>
<h3 align="center" onmouseover="this.style.color='red'" onmouseout="this.style.color='green'" onclick="this.style.color='blue'">我是变色龙！</h3>
</body>
</html>

在这一例子中，当您把鼠标移动到文字上时，文字颜色变为红色，当鼠标离开文字时，文字颜色变为绿色，当在文字上单击鼠标时，文字颜色变成了蓝色。
下面是我用样式单制作的一个自认为比较漂亮的Html文件。

例5 “轻松自学动态HTML”的图形标志

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>DHtml举例5
<style>
<!--
body {font-family:"宋体";font-size:9pt;color:#00aaff}
h2.top {font-family:serif;font-size:9pt;color:yellow;text-align:right;background-color:rgb(174,0,0)}
h2.bottom {font-family:serif;font-size:12pt;margin-left:-2pt;margin-top:-50pt}
-- >
</style>
</head>
<body bgcolor="#000000">
<br>
<table align="center" border="0" width="27%" bgcolor="#000000" cellpadding="12">
<tr>
<td width="168"><h2 class="top">轻 松 自 学 动 态 HTML</h2>
<h2 class="bottom"><span style="font-size:50pt;color:lime"><i>t</i></span>
each youself DHtml</h2>
</td>
</tr>
</table>
</body>
</html>

请注意例子中的蓝色部分，class属性是用来定义标志对使用的样式类，如<h2 class="top">……</h2>指定了 <h2></h2>标志对中使用样式类“top”，而“top”则是在<style>< style>标志对中定义的。
OK，您会了吗？样式单就这么简单。



盛青青
职务：普通成员
等级：1
金币：0.0
发贴：1
#42004/4/16 21:28:23
确实不错，非常感谢，希望尽快续贴。



康夫
职务：普通成员
等级：5
金币：3.0
发贴：3311
#52004/4/19 12:20:12
虽然没什么人想看，不过我还是贴了，希望版主不会当我是灌水 ;)


Dhtml实例教程（四）
　 现在我们开始使用javascript来编写动态Html，javascript是一种脚本语言，使用起来就象是在编写程序一样。

实际上，我们只要在Html文件中加入<script language="javascript"></script>标志对，便可以在标志对中进行编写

了。现在我们将教程二中的例3做一下变换，也能得到同样的效果。请看下边的例子。

例6 使用鼠标触发事件和动态样式表改变文本

<html>
<head>
<title>DHtml举例6</title>
<script language="javascript">
function change_text(){
if(document.all.Dragon.style.color=="Red"){
document.all.Dragon.style.color="Green";
}
else
{
document.all.Dragon.style.color="Red";
}
}
</script>
</head>
<body>
<br>
<h3 id="Dragon" align="center" onmouseover="change_text()" onmouseout="change_text()">我是变色龙！</h3>
</body>
</html>

例6中在<script language="javascript"></script>标志对中定义了函数change_text()，当此函数被调用时，它将对对

象Dragon的style属性中的color属性进行判断，若其颜色值等于“Red”，则将其color值变为“Green”（

document.all.Dragon.style.color="Green"的作用），否则将其color值变为“Red”（

document.all.Dragon.style.color="Red"的作用）。而对change_text()函数的调用是在<h3></h3>标志对中进行的，

id="Dragon"定义了<h3></h3>标志对的对象名为Dragon，onmouseover和onmouseout都调用了change_text()函数，

因此只要onmouseover或onmouseout事件触发，都会执行change_text()函数，于是便改变了Dragon的属性，即当

鼠标移动到或离开文本“我是变色龙”时，此文本的颜色将在红色（Red）和绿色（Green）之间变换。Document指

代的是例6自身这个Html文档，all指代的是此Html文档的全部对象。
现在看起来要使网页动起来已经变得简单多了。细心的读者会发现例6的局限性，因为change_text()函数只能对

Dragon对象进行颜色变换，若您想对一系列对象的文本（如列表中的每一行文本）进行颜色变换将会使代码增

加。不用担心，我们马上解决。为了让change_text()函数更具有通用性，我把CSS样式单与javascript相结合，这

将更加简单而且方便，请看明天的例7。

康夫
职务：普通成员
等级：5
金币：3.0
发贴：3311
#62004/4/19 12:20:35
Dhtml实例教程（五）
例7 CSS样式单与javascript相结合改变文本

<html>
<head>
<title>DHtml举例7</title>
<style><!--
.red {color:red}
.blue {color:blue}
-->
</style>
<script language="javascript">
function change_text(){
if(window.event.srcElement.className=="red")
{
window.event.srcElement.className="blue";
}
else
{
window.event.srcElement.className="red";
}
}
</script>
</head>
<body>
<br>
<h3 class="red" align="center" onmouseover="change_text()" onmouseout="change_text()">我是变色龙！</h3>
<h3 class="blue" align="center" onmouseover="change_text()" onmouseout="change_text()">我是变色鸟！</h3>
<h3 class="red" align="center" onmouseover="change_text()" onmouseout="change_text()">我是变色兔！</h3>
</body>
</html>

从例7中可以看到，我在CSS样式单中定义了red和blue两个样式类，然后在change_text()函数中对调用该函数的对象进行样式类的改变，从而达到颜色的变换，关键语句在于window.event.srcElement.className="样式类名"，此语句能使当前调用函数的对象的className属性改变，若class="red"，当调用change_text()函数时，其className="blue"，它的样式类也就变成了“blue”。
也许您会因为要对每一行文本增加onmouseover和onmouseout事件而觉得麻烦，不要紧，我马上来搞定这个麻烦问题。请期待明天的连载。



康夫
职务：普通成员
等级：5
金币：3.0
发贴：3311
#72004/4/19 12:26:17
Dhtml实例教程（六）
例8 对列表进行动态变换

<html>
<head>
<title>DHtml举例8</title>
<style>
body {font-family:"宋体";font-size:9pt}
.first {color:gray;text-decoration:none}
.later {cursor:hand;color:blue;text-decoration:underline}
</style>
<script language="JavaScript">
function change_text(){
if(window.event.srcElement.className=="first"){
window.event.srcElement.className="later";
}
else
{
window.event.srcElement.className="first";
}
}
document.onmouseover=change_text;
document.onmouseout=change_text;
</script>
</head>
<body>
<br>
<ul>
<li class=first> 动态Html(DHtml)
<li class=first> JavaScript
<li class=first> VBScript
<li class=first> 动态服务器页面(ASP)
<li class=first> FrontPage98
<li class=first> InternetExplorer
<li class=first> SQL Server
</ul>
</body>
</html>

本例中的特别之处在于蓝色字部分。CSS样式单首先定义了<body></body>标志对的样式（body {font-family:"宋体";font-size:9pt}），然后定义了另外两个样式类“first”和“later”，first类中的文本修饰是none，既没有修饰，而later的文本修饰是underline，及下加一条直线，并且，later类中还出现了cursor属性，其值为hand，即是网页中鼠标移到超级链结是出现的小手。除了小手外，cursor还可以取其它的值：default、hand、move、crosshair、text、wait、help、nw-resize、n-resize、se-resize、sw-resize、s-resize、w-resize、e-resize和ne-resize等。
注意到语句 document.onmouseover=change_text;和document.onmouseout=change_text;只就是我们解决上边提到的问题的关键语句，它们代替了Html文档中所有的onmouseover和onmouseout事件。
您大可以自己设计出更好看、更动感的DHtml来，不怕做不到，就怕想不到。



康夫
职务：普通成员
等级：5
金币：3.0
发贴：3311
#82004/4/19 12:27:10
Dhtml实例教程（七）

相信您已经对javascript有所掌握，现在我们用一些小技巧把文本给隐藏起来或将隐藏的文本给显示出来，您一定会喜欢这些小技巧的。这次我们用一个新的style属性--display，它的值可以是""（或null）和"none"。请看例9。

例9 隐藏和显示文本


<html>
<head>
<title>DHtml举例9</title>
<style><!--
body 
{font-family:"宋体";font-size:9pt}
.gray {color:gray}
.blue 
{color:blue}
-->
</style>
<script 
language="JavaScript">
function change() {
if(Ques.style.display == 
"none")
{
Answ.style.display = "none";
Ques.style.display = 
"";
}
else
{
Answ.style.display = "";
Ques.style.display = 
"none";
}
} 

document.onclick=change;
</script>
<body>
<ul>
<li 
id="Ques" class="gray" style="display:''">请您点击，OK?
<li id="Answ" 
class="blue" 
style="display:'none'">哈哈，我变了，请您再点击。
</ul>
</body>
</html>

此例中，文本将在您点击以后改变颜色和内容，奇妙吧。display=""或"null"是显示文本，而display="none"时是显示文本，上边的代码对您来说应该多能读懂，我就不多作解释了。今后的教程中我可能会讲解得比较少或者讲解得不太详细，大部分是用例子种的注释语句来说明，在此请读者多多谅解。明天的例子能产生闪烁滚动和颜色变换效果。



康夫
职务：普通成员
等级：5
金币：3.0
发贴：3311
#92004/4/19 12:28:23
Dhtml实例教程（八）

例11 闪烁滚动和颜色变换效果 

<html>
<head>
<title>DHtml举例10</title>
<style>
<!--
body {font-family:"宋体";font-size:9pt}
.blue {color:blue}
.red {color:red}
-->
</style>
<script 
language="JavaScript">
var flag=0; //定义变量flag， 

function disappear() 
{
var dx=window.event.srcElement;//定义变量dx为对象window.event.srcElement
var 
i,j; 
//定义循环变量 

for(i=0;i<=1000;i++){for(j=0;j<=200;j++);}//利用循环来延长执行的时间，读者可以通过改变1000和200这两个数字来调节变化速度
dx.style.display 
= "none"; 

}//function 

function appear() {
var 
dx=window.event.srcElement;//定义变量dx为对象window.event.srcElement
var i,j; 
//定义循环变量 

for(i=0;i<=1000;i++){for(j=0;j<=200;j++);}//利用循环来延长执行的时间
dx.style.display 
= ""; 

if(flag==1) //利用变量flag来改变显示文本的样式类
{ 
flag=0;
dx.className="red";}
else
{ 
flag=1;
dx.className="blue";}//if 

}//function 

</script>
<body>
<p>请您在以下各行之间移动鼠标……</p>
<br>
<ul>
<li class="blue" style="display:''" onmouseover="disappear()" onmouseout="appear()">AC 米 兰
<li class="blue" style="display:''" onmouseover="disappear()" onmouseout="appear()">国 际 米 兰
<li class="blue" style="display:''" onmouseover="disappear()" onmouseout="appear()">尤 文 图 斯
<li class="blue" style="display:''" onmouseover="disappear()" onmouseout="appear()">佛 罗 伦 萨
<li class="blue" style="display:''" onmouseover="disappear()" onmouseout="appear()">桑 普 多 利 亚
<li class="blue" style="display:''" onmouseover="disappear()" onmouseout="appear()">拉 齐 奥
</ul>
</body>
</html>