用DHTML在Web页面实现多媒体显示效果
来源：互联网 发布：华为商城源码 编辑：程序博客网 时间：2024/05/22 03:30
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 onload="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)" onmousemove="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" onclick="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;" onclick="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;" onclick="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 onload="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)" onmousemove="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" onclick="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;" onclick="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;" onclick="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页面实现多媒体显示效果
- 实现Web页面内容动态改变的dhtml操作
- 实现Web页面内容动态改变的dhtml操作
- 实现Web页面内容动态改变的dhtml操作
- JavaScript实现在web页面显示跳动的时间
- 用DHTML实现drag and drop的效果
- 【分享】VS200X水晶报表边框效果在WEB页面不连续显示问题解决方法
- 实现Web页面内容动态改变的dhtml操作http://www.knowsky.com/4074.html
- JavaScript实现页面显示效果代码
- DHTML的多媒体标签 ,web上的多媒体影音播放器
- web页面实现框选效果
- web前端 点击显示大图效果实现
- 用javabean在JSP页面中实现进度条效果
- 在WEB页面上显示进度条
- 在web页面设置横屏显示
- 在手机浏览器上显示web页面
- Vml+Dhtml:小小的页面效果,叫它"淘气鬼"好了
- DHTML页面飞动与随机出现名人名言效果
- flash里面的2维数组的简单应用
- 实现应用程序的文件拖放功能
- 应用题_将一数字分解连续整数和
- 一组很 cool 的菜单，组合起来非常的棒！
- 可控制式动态菜单的制作
- 用DHTML在Web页面实现多媒体显示效果
- 在 Web 页 面 上 制 作 WINDOWS 风 格 的 菜 单
- 告全体业主书
- 网 页 中 下 拉 菜 单 的 设 计
- 纯HTML 实现圆角表格
- 动态菜单效果
- 精妙SQL语句
- CIO如何向CEO讲解信息技术
- 感谢师兄们的激励和帮助
