📄 part5_1.cfm
字号:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb_2312-80">
<META NAME="Generator" CONTENT="Microsoft Word 97">
<TITLE> 动态HTML（DHTML）</TITLE>
</HEAD>
<BODY>
<B><FONT FACE="楷体_GB2312" LANG="ZH-CN" SIZE=6><P ALIGN="JUSTIFY"> 动态HTML（DHTML）</P>
<P ALIGN="CENTER"></P>
</B></FONT><FONT SIZE=3><P ALIGN="JUSTIFY"> </FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>动态动态</FONT><FONT SIZE=3>HTML</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>（</FONT><FONT SIZE=3>DHTML</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>）是一系列的相关技术，允许你创建高级的用户界面，它使用前面章节讲述的对象、事件、脚本和</FONT><FONT SIZE=3>style sheet</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>，开发者应该掌握这一技术来建立吸引人的站点。</P>
<P ALIGN="JUSTIFY">本章首先讲述滤镜和过渡，这可以通过图象的</FONT><FONT SIZE=3>style</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>属性来完成，它可以让你操作图象在浏览器中的行为。接着你会看到怎样动态改变网页中的内容，元素可根据用户的行为出现或消失，元素的位置和形式也可以动态改变，这可以用于建立动画及提供更多的交互性。数据绑定使得信息在客户工作站上就可以进行处理，它占用了更少的服务器和网络资源，交互性也提高了。最后值得一提的是本章讲述的技术包括微软版的</FONT><FONT SIZE=3>DHTML</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>，所有例子都在</FONT><FONT SIZE=3>IE4.0</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>上测试通过。</P>
</FONT><B><FONT FACE="楷体_GB2312" LANG="ZH-CN" SIZE=5><P ALIGN="JUSTIFY">滤镜（filter）。</P>
</B></FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY">滤镜以多种方式改变一个图象的外观，而且不需要在客户机上下载多个文件，因此有效利用了带宽、处理器和资源。每个图象都有一滤镜类型的属性，它指明了对此图象使用哪种滤镜，下表概括了</FONT><FONT SIZE=3>1E4.0</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>中包括的滤镜类型。</P>
<P ALIGN="JUSTIFY"></P></FONT>
<P ALIGN="RIGHT"><TABLE BORDER CELLSPACING=1 CELLPADDING=7 WIDTH=553>
<TR><TD WIDTH="39%" VALIGN="TOP" BGCOLOR="#ffffff">
<B><FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY">滤镜</B></FONT></TD>
<TD WIDTH="61%" VALIGN="TOP" BGCOLOR="#ffffff">
<B><FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY">描述</B></FONT></TD>
</TR>
<TR><TD WIDTH="39%" VALIGN="TOP">
<FONT SIZE=3><P ALIGN="JUSTIFY">Alpha</FONT></TD>
<TD WIDTH="61%" VALIGN="TOP">
<FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY">控制透明度</FONT></TD>
</TR>
<TR><TD WIDTH="39%" VALIGN="TOP">
<FONT SIZE=3><P ALIGN="JUSTIFY">Blur</FONT></TD>
<TD WIDTH="61%" VALIGN="TOP">
<FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY">产生模糊效果</FONT></TD>
</TR>
<TR><TD WIDTH="39%" VALIGN="TOP">
<FONT SIZE=3><P ALIGN="JUSTIFY">Chromakey</FONT></TD>
<TD WIDTH="61%" VALIGN="TOP">
<FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY">使指定的颜色透明</FONT></TD>
</TR>
<TR><TD WIDTH="39%" VALIGN="TOP">
<FONT SIZE=3><P ALIGN="JUSTIFY">Drop Shadow</FONT></TD>
<TD WIDTH="61%" VALIGN="TOP">
<FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY">在图象后产生一个偏移阴影</FONT></TD>
</TR>
<TR><TD WIDTH="39%" VALIGN="TOP">
<FONT SIZE=3><P ALIGN="JUSTIFY">Flip Horizontal</FONT></TD>
<TD WIDTH="61%" VALIGN="TOP">
<FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY">图象左右颠倒</FONT></TD>
</TR>
<TR><TD WIDTH="39%" VALIGN="TOP">
<FONT SIZE=3><P ALIGN="JUSTIFY">Flip Vertical</FONT></TD>
<TD WIDTH="61%" VALIGN="TOP">
<FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY">图象上下颠倒</FONT></TD>
</TR>
<TR><TD WIDTH="39%" VALIGN="TOP">
<FONT SIZE=3><P ALIGN="JUSTIFY">Glow</FONT></TD>
<TD WIDTH="61%" VALIGN="TOP">
<FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY">在图象边框上产生发光效果</FONT></TD>
</TR>
<TR><TD WIDTH="39%" VALIGN="TOP">
<FONT SIZE=3><P ALIGN="JUSTIFY">Gray</FONT></TD>
<TD WIDTH="61%" VALIGN="TOP">
<FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY">将彩色图象变为黑白图象</FONT></TD>
</TR>
<TR><TD WIDTH="39%" VALIGN="TOP">
<FONT SIZE=3><P ALIGN="JUSTIFY">Invert</FONT></TD>
<TD WIDTH="61%" VALIGN="TOP">
<FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY">图象反色</FONT></TD>
</TR>
<TR><TD WIDTH="39%" VALIGN="TOP">
<FONT SIZE=3><P ALIGN="JUSTIFY">Lights</FONT></TD>
<TD WIDTH="61%" VALIGN="TOP">
<FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY">加入散射光或点光源</FONT></TD>
</TR>
<TR><TD WIDTH="39%" VALIGN="TOP">
<FONT SIZE=3><P ALIGN="JUSTIFY">Mask</FONT></TD>
<TD WIDTH="61%" VALIGN="TOP">
<FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY">建立一个掩模</FONT></TD>
</TR>
<TR><TD WIDTH="39%" VALIGN="TOP">
<FONT SIZE=3><P ALIGN="JUSTIFY">Shadow</FONT></TD>
<TD WIDTH="61%" VALIGN="TOP">
<FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY">在图象后产生一个阴影</FONT></TD>
</TR>
<TR><TD WIDTH="39%" VALIGN="TOP">
<FONT SIZE=3><P ALIGN="JUSTIFY">Wave</FONT></TD>
<TD WIDTH="61%" VALIGN="TOP">
<FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY">产生波浪形扭曲</FONT></TD>
</TR>
<TR><TD WIDTH="39%" VALIGN="TOP">
<FONT SIZE=3><P ALIGN="JUSTIFY">X-Ray</FONT></TD>
<TD WIDTH="61%" VALIGN="TOP">
<FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY">产生</FONT><FONT SIZE=3>X</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>射线效果</FONT></TD>
</TR>
</TABLE>
</P>
<FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY"></P>
</FONT><FONT SIZE=3><P ALIGN="JUSTIFY"> </FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>下面简单介绍如何使用这些滤镜。</P>
</FONT><B><FONT FACE="楷体_GB2312" LANG="ZH-CN" SIZE=4><P ALIGN="JUSTIFY">Alpha</P>
</B></FONT><FONT SIZE=3><P ALIGN="JUSTIFY"> </FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>下面的语句说明了怎样调整一幅图象的透明度，透明度参数可取值</FONT><FONT SIZE=3>0</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>到</FONT><FONT SIZE=3>100</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>，</FONT><FONT SIZE=3>0</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>表示图象完全透明（看不见），</FONT><FONT SIZE=3>100</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>则完全不透明。</P>
</FONT><FONT SIZE=3><P ALIGN="JUSTIFY"> <img src=“kids.gif” style=“filter:alpha(opacity=40)”></P>
</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY">在浏览器中显示，结果如图</FONT><FONT SIZE=3>5-1</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>所示。</P>
</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=2><P ALIGN="CENTER"><IMG SRC="Image174.gif" WIDTH=323 HEIGHT=227></P>
</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="CENTER">图</FONT><FONT SIZE=3>5-1</P>
</FONT><B><FONT FACE="楷体_GB2312" LANG="ZH-CN" SIZE=4><P ALIGN="JUSTIFY">Drop式阴影</P>
</B></FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY">下例说明了怎样创建一个</FONT><FONT SIZE=3>Drop</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>式阴影，整个区域的高和宽应能包含图象及其阴影，</FONT><FONT SIZE=3>filter</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>中的参数指定了阴影的颜色及其偏移量。</P>
<P ALIGN="JUSTIFY"></P>
</FONT><FONT SIZE=3><P ALIGN="JUSTIFY"><div </P>
<P ALIGN="JUSTIFY"> style="</P>
<P ALIGN="JUSTIFY"> width: 320; </P>
<P ALIGN="JUSTIFY"> height: 320; </P>
<P ALIGN="JUSTIFY"> filter: dropshadow(color=#000000, offx=15, offy=15)"</P>
<P ALIGN="JUSTIFY">></P>
<P ALIGN="JUSTIFY"><img src="kids.gif"></P>
<P ALIGN="JUSTIFY"></div></P>
</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY"></P>
<P ALIGN="JUSTIFY">其在浏览器中显示的结果如图</FONT><FONT SIZE=3>5-2</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>所示。</P>
<P ALIGN="CENTER"><IMG SRC="Image175.gif" WIDTH=340 HEIGHT=239></P>
<P ALIGN="CENTER">图</FONT><FONT SIZE=3>5-2</P>
</FONT><B><FONT FACE="楷体_GB2312" LANG="ZH-CN" SIZE=4><P ALIGN="JUSTIFY">左右颠倒</P>
</B></FONT><FONT SIZE=3><P ALIGN="JUSTIFY"> </FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>下面的语句实现图象的左右颠倒功能：</P>
</FONT><FONT SIZE=3><P ALIGN="JUSTIFY"> <img src=“kids.gif” style=“filter:fliph”></P>
</FONT><B><FONT FACE="楷体_GB2312" LANG="ZH-CN" SIZE=4><P ALIGN="JUSTIFY">上下颠倒</P>
</B></FONT><FONT SIZE=3><P ALIGN="JUSTIFY"> </FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>下面的语句将图象上下颠倒：</P>
</FONT><FONT SIZE=3><P ALIGN="JUSTIFY"> <img src=“kids.gif” style=“filter:flipv”></P>
</FONT><B><FONT FACE="楷体_GB2312" LANG="ZH-CN" SIZE=4><P ALIGN="JUSTIFY">变为灰度图象</P>
</B></FONT><FONT SIZE=3><P ALIGN="JUSTIFY"> </FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>下面的语句将一幅彩色图象变为灰度图象：</P>
</FONT><FONT SIZE=3><P ALIGN="JUSTIFY"> <img src=“kids.gif” style=“filter:gray”></P>
</FONT><B><FONT FACE="楷体_GB2312" LANG="ZH-CN" SIZE=4><P ALIGN="JUSTIFY">反色显示</P>
</B></FONT><FONT SIZE=3><P ALIGN="JUSTIFY"> </FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>下面的语句将一幅图象变为其反色（底片效果）：</P>
</FONT><FONT SIZE=3><P ALIGN="JUSTIFY"> <img src=“kids.gif” style=“filter:invert”></P>
</FONT><B><FONT FACE="楷体_GB2312" LANG="ZH-CN" SIZE=4><P ALIGN="JUSTIFY">阴影</P>
</B></FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY">下面的语句为图象建立一个阴影，整个区域的高和宽应能够容纳图象及其阴影，</FONT><FONT SIZE=3>filter</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>的参数用于指定阴影的颜色及方向。</P>
<P ALIGN="JUSTIFY"></P>
</FONT><FONT SIZE=3><P ALIGN="JUSTIFY"><div </P>
<P ALIGN="JUSTIFY"> style="</P>
<P ALIGN="JUSTIFY"> width: 320; </P>
<P ALIGN="JUSTIFY"> height: 320; </P>
<P ALIGN="JUSTIFY"> filter: shadow(color=#000000, direction=135)"</P>
<P ALIGN="JUSTIFY">></P>
<P ALIGN="JUSTIFY"><img src="kids.gif"></P>
<P ALIGN="JUSTIFY"></div></P>
</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY"></P>
<P ALIGN="JUSTIFY">其在浏览器中显示的结果如图</FONT><FONT SIZE=3>5-3</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>所示。注意与</FONT><FONT SIZE=3>drop</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>式阴影作比较。</P>
<P ALIGN="CENTER"><IMG SRC="Image176.gif" WIDTH=335 HEIGHT=235></P>
<P ALIGN="CENTER">图</FONT><FONT SIZE=3>5-3</P>
</FONT><B><FONT FACE="楷体_GB2312" LANG="ZH-CN" SIZE=4><P ALIGN="JUSTIFY">X射线</P>
</B></FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY">下面的语句使一幅图象看起来象</FONT><FONT SIZE=3>X</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>线图：</P>
</FONT><FONT SIZE=3><P ALIGN="JUSTIFY"><img src=“kids.gif” style=“filter:xray”></P>
</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY"></P></FONT><p>
<p>
<font color="red">此手册未经本公司允许,不得擅自转载、转贴、篡改。违者将追究其法律责任。</font>
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -