DHTML的全称为动态HTML (Dynamic HTML)，它是IE4.0上增加的一个新特性，通过它可以动态地改变Web页面上各元素的位置、内容及显示风格，尤其是可以像在Photoshop中一样对图像动态地实施滤镜(Filter)及转换(Transition)，从而使Web页面表现出多媒体风格的显示效果。它具有如下几个特点：
高效 所有这些DHTML代码都是在浏览器上解释执行，避免了频繁地与服务器打交道，减少了网络传输量。
交互性能强 对用户的许多操作在本地就可做实时处理，从而得到更快的用户响应。
界面更丰富 用代码可控制Web页面上的所有元素，使页面制作者可以随心所欲地表达自己的构思。
为了更好地使用DHTML，你需要了解以下几项重要内容。
1、DHTML的目标模型：就是目标的树形结构。如同在Windows文件系统中的路径一样，参考一个文件时要指定其路径，同样，在DHTML中参照页面上的某个元素时，需要指定其层次路径，一般表示为DOCUMENT.ALL.元素ID.属性。
2、元素ID：即为元素的标识，要给每一个元素指定一个ID属性，这样在脚本中才能参考它。比如我们在一个页面中添加了一段文本，并为其设置ID标识。
<P ID="SAMPLE">
SAMPLE TEXT</P>
在脚本中可参考为：
document.all.sample
然后将它作为一个对象来对待，如改变其文本、位置及颜色等。例如：
document.all.sample.innerText="other text"
3、Vbscript或Jscript：这是DHTML中内部的操作语言，因此要了解其语法、函数等。
4、DHTML是基于HTML和CSS (Cascading Style Sheet)的：HTML就是我们一般所说的超文本标记语言，CSS指的是页面上的每个元素都具有一个Style属性，所有DHTML功能都是通过动态地修改Style属性来实现的，格式如下：
Style=”属性名1：属性值1; 属性名2:属性值2;......;”
上述格式中属性名主要有：position、top、left、width、height、background-color、color、filter、font-size等。其中较复杂的是Filter，它包括十多种滤镜和二十多种转换。
5、了解DHTML中事件的触发机制：onclick、onload、onfilterchange等。
下面是一个实例，来具体展示DHTML的效果及实现方法，主要有完整的DHTML程序清单如下：
DHTML清单如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Home Page</title>
</head>
<script language="JavaScript"><!-- //以下是用javaScript写的几个函数
var i = 0;
var j = 0 ;
var jj = 0;
function again() //当用鼠标单击计数器时执行
;
document.all.box.filters("revealTrans").stop();
againRepeat(); }
function againRepeat() //图象变换后自动触发
;
//box.style.backgroundColor = j * 5000 * Math.random();
box.style.color = j * 5000 * Math.random();
++jj;
box.filters("revealTrans").transition = j ;
box.filters("revealTrans").apply();
box.innerText = jj;
box.filters("revealTrans").play();
j += 1;}
function begin() //鼠标单出图像时触发
;
beginRepeat();}
function beginRepeat() //图象变换后自动触发
;
reveal.filters("revealTrans").transition= i ;
reveal.filters("revealTrans").apply();
if (reveal.src=="http://lqs/myweb/images/2000.gif" )
{ reveal.src ="http://lqs/myweb/images/a31.gif"; }
else
{ reveal.src="http://lqs/myweb/images/2000.gif" ; }
reveal.filters("revealTrans").play();
i +=1 ;}
function blends() //单击图像时触发
;
blendsRepeat() ;}
function blendsRepeat() //图像变换完时触发
;
if (beach.src=="http://lqs/myweb/images/a1.jpg")
{ beach.src="http://lqs/myweb/images/a3.jpg"; }
else
{ beach.src="http://lqs/myweb/images/a1.jpg" ; }
beach.filters("blendTrans").play();}
function move() //当鼠标移动时触发,光束也跟着移动。
;}
function setlight() // 程序开始触发
;
ttt.filters(0).clear() ;
ttt.filters(0).addcone(0,0,5,50,50,255,255,255,30,15);}
// --></script>
<body οnlοad="setlight()" bgcolor="#00FFFF">
<h1 align="center"><font face="隶书">DHTML多媒体显示效果</font></h1>
<table border="1" width="100%" height="230" cellspacing="0" cellpadding="0">
<tr>
<td height="1" valign="top"><img id="ttt" style="cursor:hand;filter:light();"
src="images/szpic2.gif" alt="szpic2.gif (8730 bytes)" οnmοusemοve="move()" WIDTH="122"
HEIGHT="95"></td>
<td height="1" align="center"><div id="box"
style="filter:revealTrans(duration=0.5 transition=0);cursor:hand;color:red;width:50;height:50; font-size:80px;"
width="2" height="2" οnclick="again()" onfilterchange="againRepeat()"><p>8</p>
</div><p> </td>
</tr>
<tr>
<td width="50%" height="40"><font face="隶书">上图是深圳的帝王大厦，移动鼠标可看到全貌！</font><p><font
face="隶书">下图是大海和夕阳的渐变图，请用鼠标单击！</font></td>
<td width="50%" height="40"><font face="隶书">上图是动态计数器！</font><p><font
face="隶书">下图是图橡转换，请用鼠标单击！</font></td>
</tr>
<tr>
<td width="50%" height="1" valign="top"><img id="beach"
style="filter:blendTrans(duration=4); cursor: hand;" οnclick="blends()"
onfilterchange="blendsRepeat()" src="images/a1.jpg" alt="a1.jpg (126774 bytes)"
WIDTH="256" HEIGHT="165"></td>
<td width="50%" height="1" valign="top"><img src="images/2000.gif" id="reveal"
style="filter:revealTrans(duration=1 transition=8);cursor: hand;" οnclick="begin()"
onfilterchange="beginRepeat()" width="320" height="240" alt="2000.gif (2514 bytes)"></td>
</tr>
</table>
<p><img src="images/a31.gif" alt="a31.gif (190 bytes)" style="display:none" WIDTH="32"
HEIGHT="32"></p>
<p><img visibile="none" src="images/a3.jpg" alt="a3.jpg (3934 bytes)"
style="display:none;" WIDTH="256" HEIGHT="165"></p>
</body>
</html>
在一个图像上显示一束光，随着鼠标在图像上的移动，该束光也跟着移动。从一幅图像逐渐淡化成另一幅图像。
实现后的效果如图1所示。
（图注DHTML） 图1
上述实例的DHTML代码虽然看起来很繁琐，但实现起来还是很方便的，因为在Frontpage中可生成大部分的代码，你只需要在生成代码的基础上添加适当的函数及属性即可，如果希望在自已的机器上实验上述功能，可以按如下步骤操作：
1、找5个大小适中的图片分别命名为：szpic2.gif、a1.jpg、2000.gif、a31.gif、a3.jpg，并通过Import保存到images目录中；
2、在Frontpage中建一新的页面，进入编辑画面；
2、切换到HTML显示格式，删除所有的HTML代码；
3、将本例代码拷贝到这一页面；
4、将代码中所有的http://lqs/myweb替换成你的页面地址，保存后，通过Preview或切换到IE，均可看到本文所介绍的效果。
高效 所有这些DHTML代码都是在浏览器上解释执行，避免了频繁地与服务器打交道，减少了网络传输量。
交互性能强 对用户的许多操作在本地就可做实时处理，从而得到更快的用户响应。
界面更丰富 用代码可控制Web页面上的所有元素，使页面制作者可以随心所欲地表达自己的构思。
为了更好地使用DHTML，你需要了解以下几项重要内容。
1、DHTML的目标模型：就是目标的树形结构。如同在Windows文件系统中的路径一样，参考一个文件时要指定其路径，同样，在DHTML中参照页面上的某个元素时，需要指定其层次路径，一般表示为DOCUMENT.ALL.元素ID.属性。
2、元素ID：即为元素的标识，要给每一个元素指定一个ID属性，这样在脚本中才能参考它。比如我们在一个页面中添加了一段文本，并为其设置ID标识。
<P ID="SAMPLE">
SAMPLE TEXT</P>
在脚本中可参考为：
document.all.sample
然后将它作为一个对象来对待，如改变其文本、位置及颜色等。例如：
document.all.sample.innerText="other text"
3、Vbscript或Jscript：这是DHTML中内部的操作语言，因此要了解其语法、函数等。
4、DHTML是基于HTML和CSS (Cascading Style Sheet)的：HTML就是我们一般所说的超文本标记语言，CSS指的是页面上的每个元素都具有一个Style属性，所有DHTML功能都是通过动态地修改Style属性来实现的，格式如下：
Style=”属性名1：属性值1; 属性名2:属性值2;......;”
上述格式中属性名主要有：position、top、left、width、height、background-color、color、filter、font-size等。其中较复杂的是Filter，它包括十多种滤镜和二十多种转换。
5、了解DHTML中事件的触发机制：onclick、onload、onfilterchange等。
下面是一个实例，来具体展示DHTML的效果及实现方法，主要有完整的DHTML程序清单如下：
DHTML清单如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Home Page</title>
</head>
<script language="JavaScript"><!-- //以下是用javaScript写的几个函数
var i = 0;
var j = 0 ;
var jj = 0;
function again() //当用鼠标单击计数器时执行
;
document.all.box.filters("revealTrans").stop();
againRepeat(); }
function againRepeat() //图象变换后自动触发
;
//box.style.backgroundColor = j * 5000 * Math.random();
box.style.color = j * 5000 * Math.random();
++jj;
box.filters("revealTrans").transition = j ;
box.filters("revealTrans").apply();
box.innerText = jj;
box.filters("revealTrans").play();
j += 1;}
function begin() //鼠标单出图像时触发
;
beginRepeat();}
function beginRepeat() //图象变换后自动触发
;
reveal.filters("revealTrans").transition= i ;
reveal.filters("revealTrans").apply();
if (reveal.src=="http://lqs/myweb/images/2000.gif" )
{ reveal.src ="http://lqs/myweb/images/a31.gif"; }
else
{ reveal.src="http://lqs/myweb/images/2000.gif" ; }
reveal.filters("revealTrans").play();
i +=1 ;}
function blends() //单击图像时触发
;
blendsRepeat() ;}
function blendsRepeat() //图像变换完时触发
;
if (beach.src=="http://lqs/myweb/images/a1.jpg")
{ beach.src="http://lqs/myweb/images/a3.jpg"; }
else
{ beach.src="http://lqs/myweb/images/a1.jpg" ; }
beach.filters("blendTrans").play();}
function move() //当鼠标移动时触发,光束也跟着移动。
;}
function setlight() // 程序开始触发
;
ttt.filters(0).clear() ;
ttt.filters(0).addcone(0,0,5,50,50,255,255,255,30,15);}
// --></script>
<body οnlοad="setlight()" bgcolor="#00FFFF">
<h1 align="center"><font face="隶书">DHTML多媒体显示效果</font></h1>
<table border="1" width="100%" height="230" cellspacing="0" cellpadding="0">
<tr>
<td height="1" valign="top"><img id="ttt" style="cursor:hand;filter:light();"
src="images/szpic2.gif" alt="szpic2.gif (8730 bytes)" οnmοusemοve="move()" WIDTH="122"
HEIGHT="95"></td>
<td height="1" align="center"><div id="box"
style="filter:revealTrans(duration=0.5 transition=0);cursor:hand;color:red;width:50;height:50; font-size:80px;"
width="2" height="2" οnclick="again()" onfilterchange="againRepeat()"><p>8</p>
</div><p> </td>
</tr>
<tr>
<td width="50%" height="40"><font face="隶书">上图是深圳的帝王大厦，移动鼠标可看到全貌！</font><p><font
face="隶书">下图是大海和夕阳的渐变图，请用鼠标单击！</font></td>
<td width="50%" height="40"><font face="隶书">上图是动态计数器！</font><p><font
face="隶书">下图是图橡转换，请用鼠标单击！</font></td>
</tr>
<tr>
<td width="50%" height="1" valign="top"><img id="beach"
style="filter:blendTrans(duration=4); cursor: hand;" οnclick="blends()"
onfilterchange="blendsRepeat()" src="images/a1.jpg" alt="a1.jpg (126774 bytes)"
WIDTH="256" HEIGHT="165"></td>
<td width="50%" height="1" valign="top"><img src="images/2000.gif" id="reveal"
style="filter:revealTrans(duration=1 transition=8);cursor: hand;" οnclick="begin()"
onfilterchange="beginRepeat()" width="320" height="240" alt="2000.gif (2514 bytes)"></td>
</tr>
</table>
<p><img src="images/a31.gif" alt="a31.gif (190 bytes)" style="display:none" WIDTH="32"
HEIGHT="32"></p>
<p><img visibile="none" src="images/a3.jpg" alt="a3.jpg (3934 bytes)"
style="display:none;" WIDTH="256" HEIGHT="165"></p>
</body>
</html>
在一个图像上显示一束光，随着鼠标在图像上的移动，该束光也跟着移动。从一幅图像逐渐淡化成另一幅图像。
实现后的效果如图1所示。
（图注DHTML） 图1
上述实例的DHTML代码虽然看起来很繁琐，但实现起来还是很方便的，因为在Frontpage中可生成大部分的代码，你只需要在生成代码的基础上添加适当的函数及属性即可，如果希望在自已的机器上实验上述功能，可以按如下步骤操作：
1、找5个大小适中的图片分别命名为：szpic2.gif、a1.jpg、2000.gif、a31.gif、a3.jpg，并通过Import保存到images目录中；
2、在Frontpage中建一新的页面，进入编辑画面；
2、切换到HTML显示格式，删除所有的HTML代码；
3、将本例代码拷贝到这一页面；
4、将代码中所有的http://lqs/myweb替换成你的页面地址，保存后，通过Preview或切换到IE，均可看到本文所介绍的效果。
扫一扫
457
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
