文档介绍：第十章 JavaScript应用与实践
文字特效(P206)
文字移动
JavaScript能够在网页上实现各种特殊的文字效果,使信息不仅在内容上而且在形式上都同样地吸引人。
文字移动是最基本的文字特效,文字可以是前后移动或者是左右移动,同时可以设置文字移动的速度、移动文字的大小、颜色等等。
JavaScript中文字移动的效果是通过<marquee>标签来实现的,这也是网页中使用最广泛的一种动态效果。scape浏览器中是不支持这个标签的。因此为了在所有的浏览器中都能够使文字移动的效果能够实现,必须在编写程序的时候事先考虑到这种情况,利用JavaScript来进行处理。
文字特效
文字移动
,代码见教材P199。
打开网页后,中间的文本就会由下向上缓慢移动,循环往复,就好像“跑马灯”一样。
<marquee></<marquee>产生移动效果
,所以代码很长。
Ex10-1-1是一个简化的程序,默认只适合IE浏览器。
Ex10-1-2是一个不含JavaScript的程序,可与Ex10-1-1对照来看。
文字特效
<marquee> </marquee>文字移动效果标签
direction="up" 向上移动
direction= "down" 向下移动
direction= "left" 向左移动
direction= “right”向右移动
color=#RRGGBB 六位十六进制数表示某一颜色
<strong> 表示加粗<big> 表示大字<p> 表示段落
文字特效
文字色彩(P209)
网页设计中色彩的搭配是一门学问,最简单的文字色彩控制方法就是利用<FONT>标签的“color”属性来指定。但是利用JavaScript,可以给你的文字添加更加动态的色彩效果。
CSS滤镜是一个强大的工具,结合JavaScript进行时间上的一些控制,可以轻松实现各种独特的文字色彩效果。
CSS(格式设置)的语句都放在<STYLE>标签中,例如GLOW滤镜,其标准定义语句为{filter:Glow(Color=color,Strength=n)}。
Strength=n 表示发光强度
width: 100% 表示占窗口宽度的百分比
<span></span> 标记一段文字与一个style描述对应
表示当前文档的所有对象
文字特效
文字色彩
,代码见教材P202。
简化的例子是ex10-2-
程序通过css的滤镜不断改变字体四周发散出来的颜色的强度,使文字在视觉上具有不断闪烁的效果,好像燃烧一样。
文字特效(P211)
文字形状
<marquee>标签中仅仅定义了文字移动的方向(上下和左右)和文字的移动速度等一些简单的属性,如果希望做出风格独特新颖的文字移动甚至变形的效果,这个标签就无法达到目的了。
利用JavaScript内置的函数对要显示的字符串进行处理可以实现HTML标签无法实现的文字特效,使网页变得更加生动。
文字特效
文字形状
,代码见教材P211。
打开网页后,这些字体就开始如波浪一般不断上下起伏,因为在设置字体大小的时候用到了正弦函数,所以字符串的运动效果就好像正弦波一样。
文字特效
( ) 内部函数,正弦函数
( ) 内部函数,绝对值函数
parseInt( ) 内部函数,取整函数
<div id=“div” align=“center”></div> 设置区块对象
其中“div”为区块名,=output 对应
innerHTML为显示属性
substring(i , j) 取字符串中下标为i到j(不含j)之间的字符
文字特效
<font style='font-size:72pt'>
设置字体大小的又一种方式
pt------磅