DHtml真的很吊！！！
来源：互联网 发布：淘宝漏洞该包 编辑：程序博客网 时间：2024/06/02 22:51
自从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:'宋体'）。好了，现在您已经初步掌握了样式单的用法了，明天我们开始让您的主页动起来。
例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相似。请看明天连载三的例子。
例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，您会了吗？样式单就这么简单。
现在我们开始使用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。
例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事件而觉得麻烦，不要紧，我马上来搞定这个麻烦问题。请期待明天的连载。
例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来，不怕做不到，就怕想不到。
相信您已经对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"时是显示文本，上边的代码对您来说应该多能读懂，我就不多作解释了。今后的教程中我可能会讲解得比较少或者讲解得不太详细，大部分是用例子种的注释语句来说明，在此请读者多多谅解。明天的例子能产生闪烁滚动和颜色变换效果。
例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>
这次我们要使用另一些对象属性对来实现动态改变文本，它们就是：innerText，outerText，innerHTML，
outerHTML，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。这是全新的方法，当您掌握它以
后将可随心所欲的设计动态内容了，不可错过哦！
动态改变文本和Html
<html>
<head>
<title>DHtml举例12</title>
<style><!--
body {font-family:"宋体";color="blue";font-size="9pt"}
-->
</style>
<script language="JavaScript">
function changeText()
{
DT.innerText="我很好!";
}//function
function
changeHtml()
{
DH.innerHTML="<i><u>我姓肖!</u></i>";
}//function
function back()
{
DT.innerText="您好吗?";
DH.innerHTML="您姓什么?";
}
</script>
</head>
<body>
<p><font color="gray">请点击下边的文字……</font>
<ul>
<li id="DT" onclick="changeText()">您好吗? </li>
<li id="DH" onclick="changeHtml()">您姓什么? </li>
<li onclick="back()">恢复原样!
</li>
</ul>
</body>
</html>
innerText属性用来定义对象所要输出的文本，在本例中innerText把对象DT中的文本“您好吗?”变成了“我很好!”（语
句DT.innerText="我很好!"）。而对对象DH的改变用了innerHTML属性，它除了有innerText的作用外，还可改变对
象DH内部的HTML语句，于是它把文本变成了“我姓肖!”，而且文本输出改成了斜体（<i></i>）并下加一条直线（
<u></u>），即语句DH.innerHTML="<i><u>我姓肖!</u></i>"。outerText和outerHTML也具有类似的作用，读者不妨
自己试试看。
下面我们来设计一个有趣的动态页面。
文本的动态输入与输出
<html>
<head>
<title>DHtml举例13</title>
<style><!--
body
{font-family:"宋体";color="blue";font-size:"9pt"}
.blue
{color:blue;font-size:9pt}
-->
</style>
<script
language="JavaScript">
function
OutputText()
{
if(frm.txt.text!="")
{
Output.innerHTML="在此处输出文本：<u>"+frm.txt.value+"</u>";}
//Output为一对象。
else
{
Output.innerText="在此处输出文本：";}
}//function
</script>
</head>
<body>
<p><br></p>
<form name="frm">
<p><font color="gray">请在文本框中输入文字:</font>
<input type="text" name="txt" size="50"><br>
<input type="button" value="输出文本" name="B1" class="blue" onclick="OutputText()"></p>
</form>
<p id="Output">在此处输出文本：</p>
</body>
</html>
此例的动态效果如下，先在文本框中输入文本，然后按”输出文本”的按钮，接着网页便会自动输出您所输入的文本。
文本的动态输入与输出（续）
此外，我们还可使用insertAdjacentHTML和insertAdjacentText方法（方法即是某特定对象能直接调用的函数）在先前文本或Html内容的前边或后边插入新的文本或Html内容，使用这些方法需要参数，这些参数有：BeforeBegin、
AfterBegin、 BeforeEnd和AfterEnd，它们是用来标明文本或Html插入的地方。具体用法如下例：
使用insertAdjacentHTML插入文本
<html>
<head>
<title>DHtml举例14</title>
<style>
<!--
body {font-family:"宋体";color="blue";font-size:"9pt"}
-->
</style>
<script
language="JavaScript">
function Insert()
{
document.all.New.insertAdjacentHTML("AfterBegin","<font color=red>新插入的内容<font>");
//第一个参数是用来指明位置，第二个参数是要插入的Html内容。
}
</script>
</head>
<body>
<p><br></p>
<p id="New" onclick="Insert()">点击此行蓝色文字将插入文本</p>
</body>
</html>
您可以试一下另外三个参数BeforeBegin、BeforeEnd和AfterEnd。insertAdjacentText方法地用法也是类似的。
今天我们开始使用图像了。图像在网页制作重视非常重要的一部分，如果没有图像，网页将变得很单调乏味。我们这里并不是单纯地用<img src="……" alt="……">Html标志在网页中嵌入图像，而是要使图像具有动态性。例15是一个比较简单的例子，关键是改变<img src="……" alt="……">Html标志中的src属性。
例15 动态改变图像
<html>
<head>
<title>DHtml举例15</title>
</head>
<body>
<p><br>
<font style="font-size:9pt" color="blue">在下边图形上移动鼠标可以改变图象</font>
</p>
<img style="cursor:hand" onmouseover="this.src='boom2.gif'" onmouseout="this.src='boom1.gif'" src="boom1.gif">
</body>
</html>
（注意:此例中的图像文件保存在与该HTML文档相同的目录下,因为HTML可以使用相对目录,所以src属性后边直接跟图像的文件名）
下边我们结合上一个教程中使用过的innerHTML属性和insertAdjacentHTML方法来动态改变页面。例16是一道选择题，当您选择正确时会显示“笑脸”图像，而当您选择错误时将会显示“愁眉苦脸”图像。
例16 一道动态的选择题
<html>
<head>
<title>DHtml举例16</title>
<style>
<!--
body {font-size:9pt}
ul {cursor:hand;color:blue;font-size:9pt}
.none {color:blue;text-decoration:none}
.underline {color:red;text-decoration:underline}
-->
</style>
<script language="JavaScript">
function ImgAppear(imgfile){
//此函数用于显示图像
if(imgfile=="good.gif")
{
Img.innerHTML=""; //清空Img对象中的所有Html
Img.insertAdjacentHTML("AfterBegin","<img src="+imgfile+"><br>答对了!"); //在对象Img中插入图像的Html标志
}
else
{
Img.innerHTML="";
Img.insertAdjacentHTML("AfterBegin","<img src="+imgfile+"><br>答错了!");}
}//function
function Start(){
//此函数用于“重新开始”的操作
Img.innerHTML="";
}//function
</script>
</head>
<body>
<p><br>
<font color="gray">98-99赛季欧洲冠军杯得主是哪支球队（请用鼠标点击选择项）：</font> </p>
<table width="100%">
<tr>
<td width="233"><ul class="none">
<li onmouseover="this.className='underline'" onmouseout="this.className='none'"
onclick="ImgAppear('bad.gif')">多 特 蒙 德 队 </li>
<li onmouseover="this.className='underline'" onmouseout="this.className='none'"
onclick="ImgAppear('bad.gif')">尤 文 图 斯 队 </li>
<li onmouseover="this.className='underline'" onmouseout="this.className='none'"
onclick="ImgAppear('good.gif')">曼 彻 斯 特 联 队 </li>
<li onmouseover="this.className='underline'" onmouseout="this.className='none'"
onclick="ImgAppear('bad.gif')">皇 家 马 德 里 队 </li>
<li onmouseover="this.className='underline'" onmouseout="this.className='none'"
onclick="ImgAppear('bad.gif')">巴 塞 罗 那 队 </li>
<li onmouseover="this.className='underline'" onmouseout="this.className='none'"
onclick="Start()"><font color="gray">重 新 开 始 </font></li>
</ul>
</td>
<td width="520" id="Img"></td>
</tr>
</table>
</body>
</html>
对于Html的<div></div>标志对，您可能使用的甚少，当它在动态Html的设计中却非常有用，我们可以用它的样式属性中的position属性来定义文本显示位置的方式，包括相对位置（position:"relative"）和绝对位置（position:"absolute"），然后在用样式属性中的top、left、heigh、width属性我们先来确定文本显示的位置。很多书上把对<div></div>标志对的控制叫做对“层”的控制。下面是一个简单的举例。
例17 重叠两行文本而得到的阴影效果
<html>
<head>
<title>DHtml举例17</title>
<style>
<!--
body {font-size:9pt}
.redtext {color:red;position:absolute;top:100;left:100;}
.graytext {color:gray;position:absolute;top:101;left:102;}
-->
</style>
</head>
<body>
<p><br>
</p>
<div class="graytext"><b>您最喜欢制作主页吗？</b></div>
<div class="redtext"><b>您最喜欢制作主页吗？</b></div>
</body>
</html>
和以前的教程中介绍的其它样式单的属性相似，我们同样可以用JavaScript来对<div></div>标志对中的文本进行动态控制。下面的例子将使文本在屏幕上移动。
例18 文本在屏幕中移动
<html>
<head>
<title>DHtml举例18</title>
<style><!--
body {font-size:9pt}
.move {cursor:hand;position:absolute;visibility:hidden;height:60;width:60;color:yellow;border:blue 1px solid;background-color:rgb(147,0,0);}
-->
</style>
<script language="JavaScript">
var all=document.all;
var flag=1;//变量flag用来控制“执行或终止执行函数Move()”
var act;
var xhd=0;//变量xhd为信号灯，用于控制“层”的移动方向
function MoveStamp(){
all.stamp.style.top=document.body.offsetTop;//对象stamp的top属性等于对象body的offsetTop值
all.stamp.style.left=document.body.offsetLeft;
all.stamp.style.visibility = "visible";
if(flag==1)
{
act = window.setInterval("Move()",50);//执行函数Move()
flag=0;
}
else
{
window.clearInterval(act);//终止执行函数Move()
all.stamp.style.visibility = "hidden";//隐藏对象stamp
flag=1;
}//if
}//function
function Move(){
if(all.stamp.style.pixelLeft>=document.body.offsetLeft+350) xhd=1;
if(all.stamp.style.pixelLeft<=document.body.offsetLeft) xhd=0;
if(xhd==0)
{
//对象stamp往右下方移动
all.stamp.style.pixelLeft+=5;
all.stamp.style.pixelTop+=5;
}
else
{
//对象stamp往左上方移动
all.stamp.style.pixelLeft-=5;
all.stamp.style.pixelTop-=5;
}//if
}//function
</script>
</head>
<body onclick="MoveStamp()">
<p align="center">用鼠标单击一下会有效果出现，再单击一下则效果消失，如此反复……</p>
<div id="stamp" class="move"><p valign="middle" align="center"><br><b>我要在天空中飞翔<b></p></div>
</body>
</html>
语句act = window.setInterval("Move()",50)调用了JavaScript本身具有的函数，它用于在间隔特定时间后（本例中为50毫秒）执行特定的函数（本例中为Move()函数），然后将返回值赋给一个变量（本例中为变量act），要想终止此特定函数的执行，用语句window.clearInterval(act)即可。此例是一个很不错的例子，希望您能仔细阅读，以便以后编写动态网页时能够得心应手。
哈哈，今天又有新的东西介绍给您，您知道过滤器（filter）吗？如果您经常使用图形软件（如PhotoShop等），那您肯定有所了解。过滤器可以用来对可见对象进行过滤以达到各种动态的效果。CSS拥有扩充的过滤器，我们可以将它与动态HTML相结合，制造出各种动态效果。有些书上将它称为“过渡”，它是IE4.0动态HTML技术的一部分。对于所有可视化的对象，我们都可以使用过渡的方法将它从一种状态转换为另一种状态，并且这种转换过程在浏览器重视可以清楚看到的。
HTML4.0有两种类型的过渡过滤器：Blend和Reveal。
Blend过渡可以在指定的时间间隔内实现图像的简单淡出和淡入，基本句型为：
style="filter:blendTrans(Duration=过渡的时间)"//过渡时间的单位为"秒"
而Reveal过渡可以通过使用不同的技术选择地显示或隐藏图像，它的效果有很多，基本句型是：
style="filter:revealTrans(Duration=过渡的时间,Transition=过渡的类型)"//过渡时间的单位为"秒",Transition的取值范围是0～23
下面就是一个用Blend过滤图像的例子。
例19 图像自动交替地淡出
<html>
<head>
<title>DHtml举例19</title>
<style>
<!--
body {font-size:9pt}
-->
</style>
<script language="JavaScript">
var flag=0;
//全局变量flag用来控制绘出的图象；flag=0时绘出图象lkjx2.jpg，而flag=1时则绘出lkjx1.jpg
var act;
function Change(){
act=window.setInterval("AutoChange()",9500);//每隔9.5秒钟执行函数AutoChange()
}//function
function AutoChange(){
if(flag==0)
{
flag=1;
Img.filters.blendTrans.Apply(); //用Apply方法停止原图象的绘出
Img.src = "lkjx2.jpg"; //将Img设置成另一幅图象jklx2.jpg
Img.filters.blendTrans.Play(); //用Play方法调用过滤器的淡出效果
}
else
{
flag=0;
Img.filters.blendTrans.Apply();
Img.src = "lkjx1.jpg";
Img.filters.blendTrans.Play();
}//if
}//function
</script>
</head>
<body onload="Change()">
<img id="Img" src="lkjx1.jpg" alt="会变换的图象！" style="filter:blendTrans(duration=7)">
</body>
</html>
act=window.setInterval("AutoChange()",9500)设置的时间（9.5秒）一定要比style="filter:blendTrans(duration=7)"设置的时间（7秒）长，否则将产生脚本语言出错。
既然Reveal有24种之多的过渡效果，我们就不妨试试看。
例20 Reveal过渡过滤器的24中动态效果
<html>
<head>
<title>DHtml举例19</title>
<style>
<!--
img.i1 {
width:100;
height:230;
}
-->
</style>
<script language="JavaScript">
var shape=0;//变量shape用来存储transition的数值，即动态效果的类型
var flag=0;
//全局变量flag用来控制绘出的图象；flag=0时绘出图象lkjx2.jpg，而flag=1时则绘出lkjx1.jpg
var act;
function ChangeImg(){
act=window.setInterval("ChangeShape()",7500);//每隔7.5秒钟执行函数ChangeShape()
}//function
function ChangeShape(){
if(shape==24) shape=0; //因为transition的值在0～23之间，故不能让它超过23
if(flag==0)
{
Insert.innerHTML="<img id='Shp' src='image/sunset.jpg' class=i1 style='filter:revealTrans(duration=6,transition="+shape+")'><br>这是transition="+shape+"时的效果";
Shp.filters.item(0).Apply(); //用Apply方法停止原图象的绘出
Shp.src='image/spac001.jpg'
Shp.filters.item(0).Play(); //用Play方法调用过滤器的动态效果
flag=1;
}
else
{
Insert.innerHTML="<img id='Shp' src='lkjx2.jpg' class=i1 style='filter:revealTrans(duration=6,transition="+shape+")'><br>这是transition="+shape+"时的效果";
Shp.filters.item(0).Apply(); //用Apply方法停止原图象的绘出
Shp.src='lkjx1.jpg'
Shp.filters.item(0).Play(); //用Play方法调用过滤器的动态效果
flag=0;
}//if
shape++; //shape自身加1
}//function
</script>
</head>
<body onload="ChangeImg()">
<p id="Insert"><img id="Shp" src="lkjx1.jpg" alt="会变换的图象！" style="filter:revealTrans(duration=6,transition=00)"></p>
</body>
</html>
除了前边我所讲的那些动态效果外，动态HTML还可以显示时间，或通过时间来进行动态的设计交互式网页。具体步骤如下：
通过调用函数Date()和关键字new创建一个时间对象，如语句：today=new Date();将创建时间对象today；
利用这个时间对象的getYear、getMouth、getDate、getDay、getHours、getMinutes和getSeconds等方法得到时间；
利用得到的时间进行判断和相应的操作；
在HTML文档中输出结果。
下面是一个显示当日的年份、月份和星期的简单例子。
例21 显示当天的年月日和星期
<html>
<head>
<title>DHtml举例21</title>
<style><!--
body {font-size:9pt;color:blue}
</style>
<script language="JavaScript">
var today;
var day;
var date;
today=new Date(); //此语句通过调用函数Date()和关键字new将today变成了一个时间对象
//通过时间对象today的getDay方法确定星期几，并将相应的字符串赋给变量day
if(today.getDay()==0) day="星期日 ";
if(today.getDay()==1) day="星期一 ";
if(today.getDay()==2) day="星期二 ";
if(today.getDay()==3) day="星期三 ";
if(today.getDay()==4) day="星期四 ";
if(today.getDay()==5) day="星期五 ";
if(today.getDay()==6) day="星期六 ";
//变量date用于存储年月日
date="今天是19"+(today.getYear())+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日 ";
//在HTML文档中输出"年月日"和"星期"
document.write(date);
document.write(day);
</script>
</head>
<body>
</body>
</html>
我们还可以通过获得时间判断是上午、下午或是晚上，然后相应的在网页中输出问候语：“早上好”、“下午好”或“晚上好”。
例22 给您一个问候
<html>
<head>
<title>DHtml举例22</title>
<style><!--
body {font-size:9pt;color:blue}
</style>
<script language="JavaScript">
var today;
var hello;
today=new Date(); //此语句通过调用函数Date()和关键字new将today变成了一个时间对象
//通过对象today的getHours方法确定时间是商务、下午还是晚上，并将相应的问候语字符串赋给变量hello
if(today.getHours()<=12) hello="早上好! ";
if(12<today.getHours()<=18) hello="下午好! ";
if(today.getHours()>18) hello="晚上好! ";
//在HTML文档中输出当前的具体时间
document.write(hello);
document.write("现在是"+today.getHours()+":"+today.getMinutes()+":"+today.getSeconds()+"。");
</script>
</head>
<body>
</body>
</html>
- DHtml真的很吊！！！
- DHTML的初步入门
- dhtml tree的使用
- DHTML的onScroll事件
- DHtml动态的html
- 传统的DHTML模型
- DHTML
- DHTML
- DHTML
- DHTML
- DHTML
- DHTML
- DHTML
- 加快dhtml 的一组技巧
- 加快 DHTML 的一组技巧
- 加快 DHTML 的一组技巧
- 加快 DHTML 的一组技巧
- 提高你的DHTML性能
- 高效缓存Memcached 集成使用说明
- 加密技术、密钥和证书技术
- mssql和mysql的区别
- 也谈SSDT Hook（一）
- 用SSL安全协议实现WEB服务器的安全性
- DHtml真的很吊！！！
- 平台插件学习
- 在MYSQL中插入当前时间
- 也谈SSDT Hook（二）
- 不服你不笑
- 在JBuilder 解决关闭子窗体的问题
- 2008年的第一天，Enterprise AJAX翻译工作基本完成。
- .NET学习笔记（五） ------类型设计（下）
- 动态调用web 服务
