中华网通行证
用户名 密码
  科技动态 硬件广场 下载基地 网络教室 网络冲浪 科学博览 移动时代 手机上网 桌面壁纸 科技商情  

Javascript的环绕文字效果
 冯永曜  黄山村夫

  下面的这种效果够奇妙吧(由于是抓取的过程图,无法看出其动态效果)!这是一种三维文字环绕效果,环绕文字在旋转的过程中,不但文字的大小在不断地改变,以增强立体感,更为独特的是它能从被环绕的文字(或图片)后面绕过去,这才是体现三维立体的关键所在。而且文字的环绕路径也不是简单的圆形,而是一种复杂的渐变轨迹,这么复杂的动态效果,就是用Flash来做也还要费不少脑筋,不信你试试。你可能认为这种动态效果的Javascript的程序很长吧,其实不然。不仅程序不长,制作也不复杂。

  制作方法:
  1、插入一张图片或写入一段文字,在本例中是写入一段文字,并加载了一个CSS的“shadow”滤镜以增强效果的。
  2、接着加上下面这段程序:
<SCRIPT language="javascript">
Text1="欢迎您的光临"; //这是用于旋转的文字,可以改你所需要的,但最好不要太长。
Balises="";
Fsize=30; //文字大小变化的参照值,改变这个数值,旋转文字的相对大小交改变。
Tleft=300; //文字旋转中心距页面左边界的距离,可修改它,以使旋转中心在指定位置。
Top=140; //文字旋转中心距页面顶部边界的距离,可修改它,以使旋转中心在指定位置。
H=170; //文字旋转半径。
v=70; //文字旋转偏离水平面的控制参数,该数值越大,偏转的角度越大。
maxv=v*2;
j=0; //给计数变量赋初值。
Decal=0.5;
Tl=Text1.length;
for (x=0;x<Tl;x++){ //动态编写HTML代码,这是本程序的巧妙之处。这里给每一个文字分配一个层。
Balises+="<DIV Id=L" + x + " STYLE='width:5;font-family: Arail;font-weight:bold;position:absolute;top:140;left:170;z-index:0'>" + Text1.charAt(x) + "</DIV>"
}
document.write (Balises);
Time=setInterval("Around()",100); //启用循环定时器
Alpha=5;
IA=0.08; //调整速度,此值越大,速度越快。
function Around(){ //修改各个文字所在图层的位置、层序号、文字的大小和颜色。
Alpha -=IA;
if (j<(maxv+1)) {v--; j++}else
if (j<(2*maxv+1)) {v++;j++} else{v--;j=1}
for (x=0;x<Tl;x++){
Alpha1=Alpha+Decal*x;
Cosine=Math.cos(Alpha1);
Ob=document.all("L"+x);
Ob.style.posLeft=Tleft+H*Math.sin(Alpha1);
Ob.style.posTop=Top+v*Math.sin(Alpha1);
Ob.style.zIndex=20*Cosine;
Ob.style.lineHeight=1;
Ob.style.fontSize=Fsize+25*Cosine;
Ob.style.color="rgb(0,"+ (137+Cosine*80) + ",0)";
}
}
</SCRIPT>

  上面这段程序,有以下几点值得注意:
  1、setInterval("function",delaytime)循环定时函数的作用是每隔一定时间,调用一次指定的函数,这是与setTimeout("function",delaytime)(定时函数)不同的,定时函数到了指定的时间,执行一次就结束了。而循环定时函数则是每隔一定时间就调用一次指定的函数,一直不停,要使它停止的话,可设置clearInterval(timename)函数。
  2、动态编写HTML代码,这是一种巧妙的办法,既减少你敲代码的麻烦又加快了页面的下载速度。另外这也给我们增大了创作空间,你想想,你可以随时随地编写HTML代码,那不成了动态编辑网页了吗?!但这样编写的HTML代码只能临时用,一不能保存,二要占用客户端资源。
  3、在本例的程序临时动态编写的HTML代码中,是把每个要旋转的文字分配在一个<DIV>标记,这相当于Dreamweaver3中的一个图层,这一点很要,因为图层可重叠,相互覆盖,从而可以产生一个三维空间,而它们在垂直方向的顺序是由层序号参数“zIndex”来控制的。在程序中通过“Ob.style.zIndex=20*Cosine;”语句给每个图层确定层序号,并不断地刷新,从而使得文字在旋转的过程中其层序号也在改变,使得文字时而在页面文字的后面,时而在页面文字的前面,产生一种逼真的三维效果。
  4、本文的程序只能在IE环境中下常运行,若要在NS环境下运行,可参考《推出文字效果制作》一文中介绍的方法对上述程序稍作改动。


 赛迪网 


 

更多本栏目内容
??Windows 2000系统安全设置攻略
??Dreamweaver编写CSS需要掌握的技巧
??使用Flash MX过程中的3个小技巧
??拖IE9网站图标到Win7任务栏 精彩好礼任你拿
??从此不再耗流量?Google离线地图试用
??给瑞星添加移动存储自动杀毒功能
??一周壁纸榜单 靓丽风景伴您欢度周末
??金山网络七款软件齐升级 炫丽界面贺新春
??提升网站流量和权重 百度热榜排第一
预警:电商促销引钓鱼 七夕网购需谨慎

本站检索



中华网推荐

·国家级治脑病新药思维源
·中藏药治疗脑病新突破
·治类风湿,强直性脊柱炎
·养肾·痛风·长寿
·肝病泌尿脑萎缩新药介绍
·强直性脊柱炎康复乐园
·让中医辩证不孕不育
·国医治股骨头坏死一绝
·乙肝为何久治不愈?
·二千元垄断批发做老板
·中医中药专治前列腺
·治牛皮癣白癜风已成现实
·专治痛风病的白衣天使
·不孕不育的杏林奇葩
·专卖店零售管理系统





   

网络教室编辑信箱