📄 js10.htm
字号:
<HTML>
<HEAD>
<META http-equiv="Content-Language" content="zh-cn">
<META name="GENERATOR" content="Microsoft FrontPage 5.0">
<META name="ProgId" content="FrontPage.Editor.Document">
<TITLE>第十章 JavaScript网页特效</TITLE>
<LINK rel="stylesheet" type="text/css" href="js.css">
</HEAD>
<BODY>
<H1><A name="第十章 JavaScript网页特效">第十章 JavaScript网页特效</A>
<A href="index.htm">主目录</A></H1>
<HR>
<BLOCKQUOTE>
<BLOCKQUOTE>
<P>
在掌握JavaScript编程、文档对象模型(DOM)和级联样式表(CSS)这三大动态网页开发技术的基础上，本章介绍一些实现特殊效果的JavaScript动态网页编程实例，以增强本书的趣味性和实用性。按其特性，把这些实例分为文字特效、图片特效、时间特效、窗体特效、鼠标和菜单这六类。</P>
</BLOCKQUOTE>
</BLOCKQUOTE>
<UL>
<LI><A href="#10.1 文字特效">10.1 文字特效</A></LI>
<LI><A href="#10.2 图片特效">10.2 图片特效</A></LI>
<LI><A href="#10.3 时间特效">10.3 时间特效</A></LI>
<LI><A href="#10.4 窗体特效">10.4 窗体特效</A></LI>
<LI><A href="#10.5 鼠标">10.5 鼠标</A></LI>
<LI><A href="#10.6 菜单">10.6 菜单</A><BR>
</LI>
</UL>
<H2><A name="10.1 文字特效">10.1 文字特效</A>
<A href="#第十章 JavaScript网页特效">(目录)</A></H2>
<UL>
<LI><A href="SAMPLE/S10_01.HTM">例10.1</A>，设计一个页面，页面中有一段跳动的文字。<UL>
<LI>设计思路<UL>
<LI>定时显示一段文字，每次显示这段文字时每个字符的字体大小不同，其大小变化可以使用正弦曲率变化，从而使这段文字看起来象不断跳动的文字。</LI>
</UL>
</LI>
</UL>
</LI>
<LI><A href="SAMPLE/S10_02.HTM">例10.2</A>，设计一个页面，页面中有一段循环显示的文字。<UL>
<LI>设计思路<UL>
<LI>定时显示一段文字，每次显示这段文字时把第1个字符转移到最后，从而产生循环显示的效果。</LI>
</UL>
</LI>
</UL>
</LI>
<LI><A href="SAMPLE/S10_03.HTM">例10.3</A>，设计一个页面，页面中有一段上下跳动的文字。<UL>
<LI>设计思路<UL>
<LI>定时显示一段文字，每次显示这段文字时修改其top样式属性，每次向上或向下移动一点，从而产生文字上下跳动的效果。</LI>
</UL>
</LI>
</UL>
</LI>
</UL>
<H2><A name="10.2 图片特效">10.2 图片特效</A>
<A href="#第十章 JavaScript网页特效">(目录)</A></H2>
<UL>
<LI><A href="SAMPLE/S10_04.HTM">例10.4</A>，设计一个页面，为一个图片配置一个水中倒影。<UL>
<LI>设计思路<UL>
<LI>使用垂直翻转滤镜(即flipV)使图片产生倒影效果；</LI>
<LI>使用wave滤镜使倒影产生静态波纹效果；</LI>
<LI>再通过定时器不断改变波纹的偏移量phase，使倒影产生动态波纹，有如水波在不断变化。</LI>
</UL>
</LI>
</UL>
</LI>
<LI><A href="SAMPLE/S10_05.HTM">例10.5</A>，设计一个页面，它含有一个闪烁的图片。<UL>
<LI>设计思路<UL>
<LI>通过定时改变IMG标记的visibility样式属性，使图片一会显示，一会隐藏，从而产生图片闪烁的效果。</LI>
</UL>
</LI>
</UL>
</LI>
<LI><A href="SAMPLE/S10_06.HTM">例10.6</A>，设计一个页面，它有一区域用于水平滚动展示一些带超链接的图片。<UL>
<LI>设计思路<UL>
<LI>
1、<MARQUEE>标记除了用于定义滚动字幕之外，它也可以滚动显示图片。为达到“鼠标进入,则停止滚动;鼠标出去,则继续滚动”的效果，可以为这个标记定义onmouseover、onmouseout事件属性来实现。</LI>
<LI>2、脚本new Function("…")的作用是创建以参数内容为函数体代码的函数对象，其作用类似于在标记中为事件属性直接给出脚本代码，如
<MARQUEE …onmouseover = "image_marquee.scrollAmount=0">。</LI>
</UL>
</LI>
</UL>
</LI>
</UL>
<H3><A name="10.3 时间特效">10.3 时间特效</A>
<A href="#第十章 JavaScript网页特效">(目录)</A></H3>
<UL>
<LI><A href="SAMPLE/S10_07.HTM">例10.7</A>，设计一个页面，显示一个数字时钟。<UL>
<LI>设计思路<UL>
<LI>通过“new Date()”可以取得当前时间的日期对象</LI>
<LI>通过定时器可以实时地把当前时间显示在特定位置。</LI>
</UL>
</LI>
</UL>
</LI>
<LI><A href="SAMPLE/S10_08.HTM">例10.8</A>，设计一个页面，它可以通过一个按钮控制显示或不显示数字时钟。<UL>
<LI>设计思路<UL>
<LI>1、通过按钮的value属性值(即按钮上的显示文本)区分当前数字时钟是否显示；</LI>
<LI>
2、window.setTimeout(…)方法将返回一个被启动的定时器的句柄(如用TM保存)，而window.clearTimeout(TM)方法将关闭TM所指定的定时器。</LI>
<LI>3、通过“new Date()”取得当前日期和时间。</LI>
</UL>
</LI>
</UL>
</LI>
<LI><A href="SAMPLE/S10_09.HTM">例10.9</A>，设计一个页面，它含有一个总是显示在可视区左上角的指针式时钟。<UL>
<LI>设计思路<UL>
<LI>1、根据document.body对象的scrollTop和scrollLeft属性把时钟中心设置在页面可视区的左上角。</LI>
<LI>2、通过显示连续的几个小圆点 “.”来模拟显示秒针、分针和时针；而对于各个点的显示位置，可以根据各个指针的长度和角度计算得出。</LI>
<LI>3、为便于重新定位，可将表示时钟的所有元素(即小时刻度值和小圆点“.”)放入<DIV>标记，并且设置为绝对定位。</LI>
</UL>
</LI>
</UL>
</LI>
</UL>
<H2><A name="10.4 窗体特效">10.4 窗体特效</A>
<A href="#第十章 JavaScript网页特效">(目录)</A></H2>
<UL>
<LI><A href="SAMPLE/S10_10.HTM">例10.10</A>，设计一个页面，其状态栏逐字显示“欢迎访问广州大学城”。<UL>
<LI>设计思路<UL>
<LI>为window.status属性赋予字符串值，可控制状态栏中的显示文字；</LI>
<LI>通过定时器逐次增多地显示这段文字的前几个字符，并且在最后一个字符前添加逐次减少的空格，可产生在状态栏逐字显示文字的效果。</LI>
</UL>
</LI>
</UL>
</LI>
<LI><A href="SAMPLE/S10_11.HTM">例10.11</A>，设计一个页面，其状态栏会显示鼠标所指的单词。<UL>
<LI>设计思路<UL>
<LI>
由document.body对象创建的TextRange对象表示页面中某个元素中的文本，当调用这个对象的expand("word")方法时，将扩展这个文本区域对象包括一个完整的单词；</LI>
<LI>当调用它的方法moveToPoint(event.clientX, event.clientY)时将把这个文本区域移至鼠标点的位置。</LI>
</UL>
</LI>
</UL>
</LI>
<LI><A href="SAMPLE/S10_12.HTM">例10.12</A>，设计一个页面，它含有一个跟随页面滚动的文字或图片。<UL>
<LI>设计思路<UL>
<LI>1、定时修改页面元素的样式属性top和left值，使之总是显示在页面可视区的特定位置。</LI>
<LI>2、<DIV>标记的作用在于把若干个元素组合成独立的块元素，以便对它进行整体处理，如设置它的定位属性。设置CSS样式值“position:
absolute”使该块元素能够绝对定位。</LI>
<LI>
3、在第1个<SCRIPT>块中，document.body.scrollTop的值是页面体顶边与其可视区顶边的距离(注：初值为0，当移动垂直滚动条时，该值会发生变化，通常大于0)；对于document.body.scrollLeft也类似，其值是页面体左边与其可视区左边的距离。</LI>
</UL>
</LI>
</UL>
</LI>
<LI><A href="SAMPLE/S10_13.HTM">例10.13</A>，设计一个页面，页面显示时具有雪花飘落的效果。<UL>
<LI>设计思路<UL>
<LI>
定时改变雪花图像的样式属性Top和Left值，使Top值每次增加一点，产生雪花落下的效果；而对于Left值，基本不变，但每次有很小幅度的增大或减少，产生雪花摆动效果，使用sin()函数可使这种摆动在方向上是连续的，从而产生雪花飘落的效果。</LI>
<LI>
在函数snowStart(dot_number)中，通过执行document.write(snow_dot_html)为页面添加dot_number个雪花标记,并且每个雪花具有相同的id,使得脚本可以以snow_dot[i]形式访问每个雪花图像。</LI>
<LI>
函数snowing()用于移动一次雪花点,以模拟雪花飘落效果。own_Y、own_offsetY、dot.own_am等不是<IMG>对象的标准HTML属性，但是通过赋值(如dot.own_Y
=
0;)可以为对象分配自定义属性。自定义属性own_Y和own_offsetY控制雪花点与顶边的距离，而own_am、own_X、own_dx和own_dx_offset控制雪花点与左边的距离。pixelTop和pixelLeft是样式style对象以象素为单位的top和left值。语句“self.setTimeout("snowing()",10);”控制snowing()函数每0.01秒执行一次，即每个雪花点每0.01秒移动一次。</LI>
</UL>
</LI>
</UL>
</LI>
<LI><A href="SAMPLE/S10_14.HTM">例10.14</A>，设计一个页面，该页面含有一个公告栏，它循环显示每条公告消息并且具有转换特效。<UL>
<LI>设计思路<UL>
<LI>
使用数组存放多条公告消息，通过定时器不断切换显示。为使每次公告消息的切换显示具有特殊的转换效果，可以使用转换滤镜“filter:revealTrans
(duration=…,transition=…)”。</LI>
<LI>
在页面体中，使用<DIV>定义了一个公告栏区域(其id为“promptBar”),使用的滤镜效果将用于这个<DIV>块，而公告消息将显示在其嵌入的单元格promptContent内。</LI>
<LI>函数setPromptBar()设置公告栏的特性数据，即：转换滤镜、公告栏内容、公告字体、公告栏前景色、背景色。</LI>
<LI>
函数showPromptBar()使用转换滤镜显示一条公告，其中apply()方法在设置新公告消息之前应用一个转换滤镜，而play()方法在设置新公告消息之后运行这个转换滤镜。</LI>
</UL>
</LI>
</UL>
</LI>
</UL>
<H2><A name="10.5 鼠标">10.5 鼠标</A>
<A href="#第十章 JavaScript网页特效">(目录)</A></H2>
<UL>
<LI><A href="SAMPLE/S10_15.HTM">例10.15</A>，设计一个页面，当用鼠标单击页面上任何一个图片时不会起作用(例如，单击一个含有超链接的图片时其超链接不起作用)。<UL>
<LI>设计思路<UL>
<LI>当在某个事件处理过程中将window.event.returnValue的值设置为false时将取消浏览器对这个事件的默认处理动作；</LI>
<LI>通过document.images可访问页面中的所有图片。</LI>
</UL>
</LI>
</UL>
</LI>
<LI><A href="SAMPLE/S10_16.HTM">例10.16</A>，设计一个页面，当鼠标移动时，一段文字将以蛇形方式跟随移动。<UL>
<LI>设计思路：<UL>
<LI>通过document.onmousemove事件处理过程，可以实时跟踪鼠标的当前位置；</LI>
<LI>
为使一段文字以蛇形方式跟随鼠标，可以把这段文字的每个字符分别放入可以独立定位的<SPAN>块中，以定时器方式定时改变每个字符的位置，并逐渐向鼠标靠拢，从而产生蛇形跟随的效果。</LI>
</UL>
</LI>
</UL>
</LI>
<LI><A href="SAMPLE/S10_17.HTM">例10.17</A>，设计一个页面，它有一个追随鼠标的带超链接的图片。<UL>
<LI>设计思路：<UL>
<LI>通过定时器使图片匀速向鼠标移动，从而产生图片追随鼠标的效果。</LI>
</UL>
</LI>
</UL>
</LI>
</UL>
<H2><A name="10.6 菜单">10.6 菜单</A>
<A href="#第十章 JavaScript网页特效">(目录)</A></H2>
<UL>
<LI><A href="SAMPLE/S10_18.HTM">例10.18</A>，设计一个页面，它有一个普通的一级菜单，当鼠标移向菜单项时会自动出现一个说明菜单命令的提示框，并且当单击菜单项时能够产生对应的操作。<UL>
<LI>设计思路<UL>
<LI>1、在页面中建立一级菜单的常用方法是把每个菜单项放入表格中；</LI>
<LI>2、为了使鼠标指向某个菜单项时显示相应的提示框，为每个菜单项指定onmouseover和onmouseout事件处理过程；</LI>
<LI>3、为每个菜单项的onclick事件指定带参数的doMenuItem(menu_index)过程，使我们可以为每个菜单项编写相应的操作代码。</LI>
</UL>
</LI>
</UL>
</LI>
<LI><A href="SAMPLE/S10_19.HTM">例10.19</A>，设计一个页面，当用鼠标单击一段文字时，将弹出一个下拉菜单。<UL>
<LI>设计思路：<UL>
<LI>1、定义一个可存放各菜单项的<DIV>块，并把这个菜单块设置为绝对定位；</LI>
<LI>2、当鼠标单击某段文字时，显示这个菜单，并且根据当前鼠标的坐标调整菜单的位置，使之产生“下拉”效果；</LI>
<LI>3、当鼠标单击页面中其他地方时，就隐藏这个菜单。</LI>
</UL>
</LI>
</UL>
</LI>
<LI><A href="SAMPLE/S10_20.HTM">例10.20</A>，设计一个页面，它有一个动态菜单卷缩在浏览可视区的左边界，当鼠标进入这个菜单时，菜单就完全展开，而当鼠标离开菜单时，这个菜单又卷缩起来。<UL>
<LI>设计思路：<UL>
<LI>1、通过定时器使菜单总是处于浏览可视区的左边界上；</LI>
<LI>2、当鼠标进入菜单时，右移菜单使之完全显示，而获得“展开”菜单的效果； </LI>
<LI>3、当鼠标离开菜单时，左移菜单使之部分显示，而获得“卷起”菜单的效果。</LI>
</UL>
</LI>
</UL>
</LI>
<LI><A href="SAMPLE/S10_21.HTM">例10.21</A>，设计一个页面，当用鼠标右击某段文字时将弹出一个菜单。<UL>
<LI>设计思路：<UL>
<LI>1、使用<DIV>标记设计一个标准弹出菜单；</LI>
<LI>2、当鼠标右击某段文字时，显示菜单；而当单击其他位置时，则隐藏菜单； </LI>
<LI>3、当鼠标在菜单上移动时，高亮显示当前菜单项。</LI>
</UL>
</LI>
</UL>
</LI>
</UL>
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -