JavaScript动态网页制作

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

JavaScript动态网页制作宝库
∙动态网页制作简介
∙网页中的最后修改日期
∙巧用表单单选框
∙网页电子时钟揭密
∙用Javascript制作跳动的文字
∙Javascript的推出文字效果
∙Javascript的环绕文字效果
∙用Javascript制作鼠标移动跟随
∙Javascript制作水中倒影
∙用Javascript制作推拉门式菜单
∙用Javscript制作图片变换特效
∙用Javascript制作会计算的表单
∙用Javascript制作复选框
∙用Javascript制作旋转导航菜单
动态网页制作简介
动态HTML（即 DHTML）是近年来网络发展进程中最振奋人心，也最具实用性的创新之一。

国内网络界也掀起了一股学习动态HTML的热潮。

所谓动态网页就是采用动态HTML 制作出来的具有动态效果的网页。

有人把动态HTML当作一门语言，也有人把它当作一种专门的技术，这些理解都是不对的。

实际上，它是一种通过各种技术的综合发展而得以实现的概念（当然，不同的浏览器，实现的程度也不同），这些技术包括Javascript、VBScript、Document Object Model（文件目标模块）、Layers和 Cascading Style Sheets（CSS）等。

那么，到底什么是动态HTML呢？简而言之，动态HTML就是一种即使在网页下载到浏览器以后仍然能够随时变换的HTML。

比如，当鼠标移至文章段落中，段落能够变成蓝
色，或者网页头部能够滑过电脑屏幕。

这就是说，HTML中能够做的一切在网页下载后还能够做。

动态HTML的实现手段同样是多种多样的，可以是现有的各种手段的组合。

比较常用的技术有：
（l）脚本编程语言（Javascript， VBScript）
（2）文件目标模块（DOM）
（3）层叠样式表（CSS）
（4）动态图层（layers）
Netscape Communicator 4．0以上版本和 Microsoft Internet Explorer（IE） 4．0以上版本，都宣称支持这种最新的动态HTML功能。

但实际上，他们所支持的动态HTML 内容并不完全相同。

IE 4.0所支持的动态 HTML包括以下几部分：
（1）层叠样式表（CSS）：提供了设定HTML标记的所有文本修饰（如文字的大小、字体、颜色等内容）的排版功能。

在网页下载完毕后，可动态地改变页面元素的CSS属性。

（2）动态内容（ Dynamic Content）：可以动态地更新网页的内容，即可以动态删除和增加页面中的各种元素，随时适应页面编排的需要。

（3）动态图像：通过内建的 Animation可以实现动画的效果，另外配合 Javascript、VBScript或ActiVeX控件可以轻松地移动图像。

（4）数据库支持：通过动态HTML方便地实现对数据库中数据的访问。

从而使网页设计者轻松地处理数据，实现更强大的交互功能。

Netscape 4．0所支持的动态 HTML包括以下几部分：
（1）层叠样式表（CSS）。

（2）脚本排版样式（Javascript Style Sheets）：简称 JSS，这是 Netscape公司为该浏览器内建的一种排版样式，可以通过 Javascript来控制 Style Sheets。

（3）动态图层（Dynamic Layers)这是一项很强大的功能，可以提供图文定位、移动图文、控制显示或隐藏图片的功能，方便地实现各种特殊效果。

我们制作动态网页主要是利用CSS定义的属性可以动态改变、图层可以动态定位和
在客户端解释执行的Javascript 程序能够实时地操作HTML元素及其属性的特性，才使得网页动起来，与用户的实时交互得以实现。

所以，要掌握动态网页制作技术，除了要熟悉CSS、图层应用技术外，还必须学好Javascript语言，并不要求达到熟练编程的水平，而是要达到基本能看懂程序。

因为制作动态网页大多采用“拿来主义”，把别人的成果拿来后，不要生吞活咽，而是要细嚼慢咽，知其然且知其所以然，大胆地做一些改进试验，这样你的水平就会很快提高。

在制作动态网页的过程中，要特别注意两大主流浏览器对动态HTML对持的程度是不同的，要使网页适应不同的浏览器，在程序中的一些具体操作上要分别设计。

如：IE 浏览器不支持Layers，但我们可以用DIV来代替，Dreamweaver3中图层给我们做了很好地示范。

又如：NS不支持document.all和style则我们就要分别设计。

如此等等，在本专题中将作详细描述。

网页中的最后修改日期
利用文档对象的一个属性lastModified就可以显示网页最后日期，这一点对一个网站管理者来说是十分有用的。

可以在网页中加入相应的函数，自动显示文档的最后修改日期。

其实，很多网页都有这段程序，我在这里把这段大家都用的程序作为例子进行剖析，以说明如何对一个Javascript程序举一反三地应用。

一、最简单的用法
示例：本页最后更新日期： 01/31/2001 16:01:24
这个例子只用了一条语句，请看源代码：
<script language="Javascript">

</script>
这里document.write(stModified)的作用是用document对象的write
方法把document对象的lastModified属性值写到文档中。

在《Javascript基础》一文中已讲过，对象是一组含有数据的属性和对属性中数据进行操作的方法。

这里，document 是一个对象，它包含了许多类似lastModified这样的属性，也包含了许多类似于write 这样的方法，我想你现在应该对什么是对象、什么是对象的属性和方法有所理解了吧？！那么怎样知道有那些对象，一个对象又有那些属性和方法呢？这只有去查看Javascript 的教科书了。

二、显示我们习惯的日期
示例：更新日期：2001年1月31日
上例的日期表示方法是按西方人的习惯的，而本例这种写法就符合中国人的习惯了。

我们再来看看源代码：
<script languae="JavaScript">

</script>
本程序的思路：把表示日期的数码从lastModified中分离出来，再加上中文年月日不就行了吗！
Javascript的Date类型有相应的方法把日期数码分离出来，所以第一步就声明了一个日期变量“lastdate”，并把stModified作为一日期类型给lastdate 赋值。

后面就是用相应的方法获取年月日数字了，最后，再用document的write方法把它写入网页文档。

在这段程序中加了一句：if (Number(Y) <100) Y="20"+Y;由于比较老一点的机器，年份是用两位数表示，就是所谓的“千年虫”，所以2001年就变成
了01年，先把年份由字符变为数值再100比较，若小于100，说明是用两位数表示年份，所以在前面加“20”，若大于100，则是用四位数表示年份，所以就不用改了。

获得的月份数为什么要加1呢？这是因为这里的月份是从0开始的，所以要加1，否则1月就变成0月了。

由于是数字相加，所以要先把月份用Number函数把字符变为数值。

三、可控显示修改日期
图1 未按鼠标时的按钮图
图2 按下鼠标后的按钮图
这个例子中，只有你按下按钮才显示更新日期，而当你鼠标移开按钮时，更新日期又不见了。

先看代码：按钮代码：
<input type="button" name="lsdate" value="按这里查看最近更新日期"
onclick="ldate()" onmouseout="resetvalue()">
程序代码：
<script languae="JavaScript">

</script>
按钮代码中加了两个事件，并通过事件调用相应的Javascript函数，以完成相应的功能，另外这里给按钮取了一个名称“lsdate”，以便程序中使用。

对于要在程序中使用的元素，给它取一个合适的名称是一种好习惯，用网页制作工具软件的朋友，当然也可采用软件自动生成的元素名称，但为了便于记忆，还是自己取一个比较好。

程序基本上与例二类似，但已把获得日期的代码定义为一个函数了，你看创建函数就是如此简单。

那对花括号就是圈定函数的范围的。

另外这里也不能再用write方法了，而是直接给按钮的“value”属性赋值，这里的document.all很重要，它的意思是文档的所有元素，也就是说它包含了当前网页的所有元素。

它是以数组的形式保存元素的属性的，所以我们可以用document.all["元素名"].属性名="属性值"来动态改变元素的属性。

用这条语句，可以做出许许多多动态网页效果，如：动态变换图片、动态改变文本的背景、动态改变网页的背景、动态改变图片的大小、动态改变文字的大小各颜色等等。

你简直可以动态控制所有网页元素。

这是不是一条神通广大的语句，应该说是Javascript神通广大！
巧用表单单选框
在网页的表单中使用单选框与用户进行交互是十分常见的方法，若是给每个选项再配一段选项的内容介绍，使用户在选择的时候做到心中有数，不是效果更好吗？若是每个选项的边上都写上一段说明文字，那就使页面太乱了，使用户不明白你是在作介绍还是在做表单。

我们要做的是这样一种效果，在单选框的边上适当地划一块出来显示选项的介绍，随着用户选择不同的选项动态地更换内容，下面的单选框就具有这种效果，请看效果图。

图1
图2
在上面的表单中用了三个单选框组成一个“景点选择单元”，另用一个单行文本框用来显示景点简介，另外用一个按钮链接到已选择景点的相应网页，用HTML是无法实现这种动态效果的。

用Javascript做起来并不难，所增加的代码也不多。

表单的代码如下：
<form name="jdxzform" method="post" >
<p>
<input type="radio" name="radiobutton" value="hsfg/hsfg.htm" checked onclick="showjj(1)"> 黄山风景区 </p>
<p>
<input type="radio" name="radiobutton" value="hsfg/gmj.htm"
onclick="showjj(2)"> 黟县古民居</p>
<p>
<input type="radio" name="radiobutton" value="hsfg/qys.htm"
onClick="showjj(3)"> 道教圣地齐云山</p>
<div align="center">景点简介
<input type="text" name="jdjj" size="50" value="点击景点单选框，在此显示相应景点的简介。

">
</div>
<p>
<input type="button" name="Button" value="显示相应的网页"
onclick="showpage()">
</p>
</form>
这个表单的代码与普通表单稍有差别：
1、三个单选框的value参数值都是一个网页的地址，这是为了按下“显示相应网页”能实现显示相应网页的效果而设置的；
2、单选框都加了一个onclick事件来调用“showjj”函数来实现在文本框中显示相应的景点简介效果；
3、在按钮中加了一个onclick事件来调用showpage函数以实现按下按钮后能显示已选择的景点对应的网页。

那么这两个函数是如何实现这种效果的呢？请看下面的程序代码，为了你看起来方便，把程序的解释写在相应代码的边上：
<script languae="JavaScript">
<!--
function showpage(){ //显示相应网页的函数，供按钮调用
var paageurl; //声明一个存放相应网页地址的变量
for (i=0;i<document.jdxzform.item.length;i++) //对表单中所有表单标记循环检测一遍
{
if (document.jdxzform.item[i].checked) //如果该单选框的checked为真，也就是被选中
pageurl=document.jdxzform.item[i].value; //那么把该单选框中value参数值（即相应的网页地址）赋给pageurl变量。

}
location.href=pageurl; //把pageurl的值（即相应网页的地址）赋给locqtion.href，以显示已被选择的景点对应的网页。

} //显示相应网页的函数结束。

function showjj(n){ //显示被选单选框对应景点的简介，这是一个带参数的函数，其参数就是单选框的顺序号。

var jj //声明一个存放相应景点简介信息的变量
switch(n){ // switch语句开始，它的作用是可以根据条件值的不同，选择执行不同的语句，与if语句类似，在这里就是根据单选框顺序号不同，选择不同的景点简介。

case 1:jj="薄海内外，无如徽之黄山，登黄山，天下无山，观止矣";break; //这里的break语句是不参省的，在这里的作用是当条件满足，就跳出switch语句段。

若在switch 语句不用break的话，你得到的永远都是最后那一条语句的结果。

case 2:jj="黟县小桃园，烟霞百里间，地多灵草木，人尚古衣冠";break;
case 3:jj="天下无双胜境，江南第一名山——清乾隆";
}
document.all["jdjj"].value=jj; //把景点简介内容赋给“jdjj”的value参数，由于“jdjj”就是那个单行文本框的名称，因此也就是改变了文本框中显示的景点简介内容，从而达到了动态显示相应景点简介的目的。

}
-->
</script>
本文例子的制方法如下：
1、按文中介绍的方法做好表单；
2、把 Javascript程序复制在网页源代码的<head>与</head>之间就一切OK了。

若你所需要的单选框数不是三个，只要在switch语句多加几个"case"就行了，其它无需改动，上面程序代码中双斜杠（//）后是注释，不是程序所必须的，实际应用时可删去。

再次提醒一下，程序中要用到的网页元素名称（如本例中的“jdxzform”、“jdjj”等）大小写一定要一致，这是初学者最易犯的错误。

网页电子时钟揭密
在网页做一个小小电子时钟，给你的网页增加一点新意。

本文介绍的电子时钟是可由用户控制的，若你喜欢它，就把它打开，若不喜欢它，可随时将它关闭。

你可试试下面的例子。

图1 显示时间
图2 关闭时间显示
实际上，这种动态效果，用Javascript来做，也用不了几行代码。

编程思路：用一个时间函数不断地刷新单行文本框中的时间。

然后用一个单选框来调用显示时间的程序，再用一个单选框来取消时间函数。

我们知道Javascript的Date对象中不仅可获得当前日期。

而且可以获得当前时间，关键的问题是如何把表示时间的数值分离出来，方法有多种，下面分别介绍。

方法一：这种方法比较传统，但程序比较繁（不推荐）。

程序代码如下：
<script language="Javascript">
<!--
function showtime(){
now=new Date(); //获取当前日期和时间，并赋给now；
H=now.getHours(); //从now 对象中分离出小时数；
M=now.getMinutes(); //从now 对象中分离出分钟数；
S=now.getSeconds(); //从now 对象中分离出秒数。

timestr=(H<10)?("0"+H):H; //如果小时数小于10，就给它加一个“0”，使其保持两位数。

timestr+=":"; //小时数后面加一个两点（“：”）的符号。

timestr+=(M<10>)?("0"+M):M; //如果分钟数小于10，就给它加一个“0”，使其保持两位数。

timestr+=":"; //分钟数后面加一个两点（“：”）的符号。

timestr+="(S<10)?("0"+S):S; //如果秒数小于10，就给它加一个“0”，使其保持两位数。

document.all["witch"].value=timestr; //把当前时间字符串赋给文本框（“witch”）的value属性，从而在文本框中显示当前时间。

ctroltime=setTimeout("showtime"),500); //设置一个定时函数，使得每0.5秒刷新一次文本框中显示的当前时间，从而达到电子时钟每秒跳一下的效果。

}
function closetime(){
clearTimeout(ctroltime) //取消定时函数，也就停止刷新文本框中的时间值，达到关闭时钟的效果。

}
-->
</script>
在这段程序中，timestr=(H<10)?("0"+H):H;语句是if语句的缩写形式，它与if (H<10) timestr="0"+H else timestr=H;语句的作用完全相同。

另外“+=”运算符的作用是：把两个操作数相加再把结果赋给左操作数，如：timestr+=":";与
“timestr=timestr+":"”语句完全等效。

方法二、这种方法比上面的方法简单多了。

程序代码如下：
<script languae="JavaScript">
<!--
function showtime(){
var i=0; // 声明一个变量，用于放置的值
now=new Date(); //获取当前日期和时间
timestr=now.toLocaleString(); //把当前时间转换成字符形式
i=timestr.indexOf(":"); // 找出“：”的位置。

nowtime=timestr.substring(i-2,i+6) //把“：”所在位置的前两位到“：”位置后6位的所有字符取出来，实际上是把表示时间的字符串取出来。

document.all["witch"].value=nowtime; //此后的语句与方法一相同，不另解释。

ctroltime=setTimeout("showtime()",500);
}
function closetime(){
clearTimeout(ctroltime)
}
-->
</script>
在这段程序中，使用日期对象的toLocaleString()方法，把日期转换在字符串形式，便于后面的操作；字符串对象的indexOf()方法的作用是找出给定字符在当前字符串的位置；字符串对象的substring(pos1,pos2)方法的作用是取得字符串的子串，pos1和pos2 分别是子中的起始位置和结束位置。

方法三、这种方法所用代码最少，程序代码如下：
<script languae="JavaScript">

</script>
本方法的巧妙之处是采用了字符对象的分割字符串方法（split()），它的用法格式为：string1.split(string2)
其作用是：将字符串string1按照string2进行分割，返回一个数组，分割后的内容按顺序放在数组中。

在本方法中，就是把日期字符串按空格（" "）分割，这样分割后，时间字符串正好在数组的第四个下标变量中。

由于该数组是从0开始起算的，所以把timestr.split(" ")[3];赋给文本框的value参数，若你感到这讲得太专业了，你直接把程序复制就行了。

表单的代码如下：
<input type="text" name="witch" size="8" value="电子表">
<input type="radio" name="radiobutton" value="radiobutton"
onclick="showtime()">显示时间
<input type="radio" name="radiobutton" value="radiobutton"
onclick="closetime()">关闭时间显示
本文电子时钟的制作方法：
1、用表单按文中介绍的方法制作一个时钟样式，发挥你的创意，把它做得漂亮一点，如可加上背景图片；
2、把程序复制在网页源代码的<head>与</head>之间，大功告成。

本文列举三种方法的目的是想说明，实现同样的效果，方法是多样的，一种好的方法，将大减少代码的数量，是省时省力的好事，所以我们要灵活应用我们所掌握的知识。

用Javascript制作跳动的文字
一段文字，每个字都在不停地变换着颜色，不停地改变大小且不停地变换位置，像一个个活泼可爱的小精灵。

若是在网页上放上具有这种效果的一段文字，会使整个页面充满生气。

当然，用动画做这种效果是不成问题的，但用Javascript来做要瘦小的多。

下图是抓取的跳动文字瞬间图：
图1
制作方法：
1、先插入一个1*n表格，这里的n就是要跳动的文字数，把表格的高度定义为70px，实际上表格高度的设定原则是要大于最大的跳动文字。

否则在文字跳动时，整个页面都在抖动。

然后把文字写入表格中，每个单元格写一个字，由于要在程序中对每个字的属性进行操作，所以还要用<span>标记把字括起来，并给它取一个名字（在本例中是a1、a
2、a3......a6），没有名字，程序无法操作。

本例的文字部分代码如下：
<table width="90%" height="60" border="0" >
<tr >
<td><span id="a1">赛</span></td>
<td><span id="a2">迪</span></td>
<td><span id="a3">互</span></td>
<td><span id="a4">动</span></td>
<td><span id="a5">学</span></td>
<td><span id="a6">校</span></td>
</tr>
</table>
2、在<head>与</head>之间插入下面这段程序。

程序思路：用Javascript的数学对象中的random()方法，产生一个0-1之间的随机数，并用这个随机数通过运算，获得一个在一定范围内的随机数，用这个数作为文字的颜色、大小的属性值，再用一个定时函数不断地刷新，从而获得预期效果。

下面是程序源代码：
<script languae="JavaScript">
<!--
function movetext(){
document.all.a1.style.fontSize=16+Math.floor(Math.random()*24); //改变字大小document.all.a1.style.lineHeight=1.2; //行高取文字的1.2倍。

c1=Math.floor(Math.random()*256);
c2=Math.floor(Math.random()*256);
c3=Math.floor(Math.random()*256);
document.all.a1.style.color="rgb("+c1+","+c2+","+c3+")"; //改变文字的颜色。

document.all.a2.style.fontSize=16+Math.floor(Math.random()*24); document.all.a2.style.lineHeight=1.2;
document.all.a2.style.color="rgb("+c2+","+c1+","+c3+")";
document.all.a3.style.fontSize=16+Math.floor(Math.random()*24); document.all.a3.style.lineHeight=1.2;
document.all.a3.style.color="rgb("+c3+","+c2+","+c1+")";
document.all.a4.style.fontSize=16+Math.floor(Math.random()*24); document.all.a4.style.lineHeight=1.2;
document.all.a4.style.color="rgb("+c2+","+c3+","+c1+")";
document.all.a5.style.fontSize=16+Math.floor(Math.random()*24); document.all.a5.style.lineHeight=1.2;
document.all.a5.style.color="rgb("+c1+","+c3+","+c2+")";
document.all.a6.style.fontSize=16+Math.floor(Math.random()*24); document.all.a6.style.lineHeight=1.2;
document.all.a6.style.color="rgb("+c3+","+c2+","+c1+")";
timer=setTimeout("movetext()",300); //每300毫秒刷新一次。

}
-->
</script>
程序中的Math.random()的作用是产生一个0-1之间的随机数，那么用
Math.random()*N，就可获得0-N之间的随机浮点数；Math.floor的作用是对括号内的数取一个比它小的最大整数，通过Math.floor (Math.random()*N组合，可以获得0-（N-1）之间的随机数，在本例中通过Math.floor(Math.random()*24，获得一个0-23之间的随机整数，Math.floor(Math.random()*256)可获得一个0-255之间的随机整数。

这段程序比较简单，不再多作解释了。

注：本例中各文字的颜色是通过改变三种颜色数值（c1、c2、c3）的顺序来达到每个文字产生随机颜色。

当然也可以仿照本例中第一个文字那样用随机数来产生，但要增加不少运算工作量和代码。

3、在<body>标记中加入 onload="movetext()"，以便这段文字在网页载入时，就跳动起来。

通过本文的例子，你看用Javascript改变文字的属性多么简单，要牢记的是：在javascript中要对哪个元素操作，必须要有“名字”，也就是ID号。

要产生动态效果，setTimeout(function,value)不可少。

另外请注意：上面的程序只能在IE中正常运行，若要在NS中正常运行，则必须改写，具体修改方法是把document.all.a1.style.改为yers["a1"].，其它语句仿此修改。

Javascript的推出文字效果
一段文字由页面里逐渐向外推出，在推出的过程中，颜色也在不断地变化，速度逐渐加快，而在最后又稍作停顿，产生一种动画效果，但它不是动画，是用Javascript制作的一种动态文字效果。

它实际上是用不断地将文字从小到大改变来模拟出文字由远及近的推出效果的。

下页是效果图：
图1 变化过程图
图2 变化过程图
这种效果还不错吧？想做一个吗？请看制作方法：
1、插入一个1*1的表格，输入文字，并用<span>把它括起来，再给它取个名字。

为了使效果更好一点，在本例中还加载了一个CSS的“shadow”滤镜，使文字产生阴影的效果。

本例文字部分的源代码如下：
<table width="60%" border="0" height="70">
<tr>
<td class="shadow1">
<div align="center"><span id="a1" style="font-weight:bold">黄山村夫站
</span><br>
<span id="a2" ></span></div>
</td>
</tr>
</table>
2、在<head>与</head>之间加入下面这段程序，源代码如下：
<script languae="JavaScript">

</script>
这个程序由于考虑了适应IE和NS两种浏览器，所以程序代码增加了不少。

在本例中是通过不同的浏览器支持不同的对象来检测浏览器的。

如：IE浏览器支持document.all而不支持yers，所以如果浏览器支持document.all那么它就是IE系列的浏览器（当然版本必须在3.0以上），反之亦然。

程序的主体部分是改变文本的属性，方法比较简单，但要注意：在有多行文本时，对象的名称不要搞乱了。

程序中设置了一个记数器（“i”），当定时函数每刷新一次，记数器加1，而文字大小、颜色等属性值又是通过与计数器值（“i”）的运算得出的，所以在刷新时将会发生改变，当然不能无限制地大下去，否则很快就一个页面也放不下一个字了，在本例中计数器最大计数是“8”，一旦达到就使它回归到“1”，从而使文字从小变到大，达到一定时候，就又从头开始，就是这条语句“if (i>8)i=1;else i++;”所起的作用。

为了使文字在变化过程中产生一种由慢变快的效果，从而使由远及近的效果更明显一些，对定时器的时间值也进行了动态设置，这条语句“if (i<9)
t1=setTimeout("movetext()",1000/(i*0.5));”就是起这种作用的。

那么当文字变到最大时又多停留一下就是这条语句“else t1=setTimeout("movetext()",2000);”的作用了。

你若想使最大的文字停留更长时间，只要加大定时器的毫秒数就行了，本例中是2000毫秒，也就是2秒。

3、在<body>标记加上onload="movetext()"以使网页加载时就显示这种效果。

本文的例子中，有两点值得注意：
1、IE和NS虽然都支持Javascript，但在具体操作的时候还是有一些区别的，要制作一种跨平台的效果就必须考虑这种区别；
2、定时器函数的定时时间也可以动态控制，从而可以用制作更多的特效，如：一个运动的图片可以使它时快时慢等等。

Javascript的环绕文字效果
下面的这种效果够奇妙吧（由于是抓取的过程图，无法看出其动态效果）！这是一种三维文字环绕效果，环绕文字在旋转的过程中，不但文字的大小在不断地改变，以增强立体感，更为独特的是它能从被环绕的文字（或图片）后面绕过去，这才是体现三维立体的关键所在。

而且文字的环绕路径也不是简单的圆形，而是一种复杂的渐变轨迹，。