通俗基础教程
电脑操作教程
电脑怎样拨号上网
如何做个人网页
怎样做局域网
Word教程(文字处理)
图形图象处理入门
经典提高教程
怎样使用代理服务器
如何做无盘工作站
Photoshop教程
Dreamweaver3教程
Flash4&5教程
Firework3教程
Frontpage2000教程
Authware教程
Office2000教程
如何制作动画图片
OICQ&ICQ使用方法

高手学习指南

硬件升级技巧
CGI教程
ASP教程

PHP教程

注册表使用技巧
路由器的设置
网站建设指南
SQL
最近更新:
网页编辑
相关内容

用DHTML在Web页面实现多媒体显示效果

 
李启拴 蔡谊 白雷 邓为新

  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,均可看到本文所介绍的效果。

网页制作探源
网页侦测四法
网页字体的美化
网页制作常见问题解答[一]
网页制作常见问题解答[二]
网页制作常见问题解答[三]
网页制作常见问题解答[四]
网页制作常见问题解答[五]
“画中画”效果---谈Iframe标记的使用
Html保持用户状态的多种方法比较
DOC转换为HTML后的变化
超链“确认”对话框
制作个人首页的窍门
如何在网页上输入中文日期
禁止查看原代码
网页减肥超强工具组合
CuteFTP最新实用技巧
在网页上实现文字闪烁
向网页施展文字魔法
怎么弹出一个新的窗口
在Web页面上制作WINDOWS风格的菜单
如何实现自动友情链接
动态网点、快速网页的实现
用DHTML在Web页面实现多媒体显示效果
 
 
 
 
教程站
收集整理
服务大家



月光软件源码下载编程文档电脑教程网站优化网址导航网络文学游戏天地生活休闲写作范文安妮宝贝站内搜索
电脑技术编程开发网络专区谈天说地情感世界游戏元素分类游戏热门游戏体育运动手机专区业余爱好影视沙龙
音乐天地数码广场教育园地科学大观古今纵横谈股论金人文艺术医学保健动漫图酷二手专区地方风情各行各业

月光软件站·版权所有