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环境下运行,可参考《推出文字效果制作》一文中介绍的方法对上述程序稍作改动。
与 或 标题 全文 关键字 以上全部
·国家级治脑病新药思维源 ·中藏药治疗脑病新突破 ·治类风湿,强直性脊柱炎 ·养肾·痛风·长寿 ·肝病泌尿脑萎缩新药介绍 ·强直性脊柱炎康复乐园 ·让中医辩证不孕不育 ·国医治股骨头坏死一绝 ·乙肝为何久治不愈? ·二千元垄断批发做老板 ·中医中药专治前列腺 ·治牛皮癣白癜风已成现实 ·专治痛风病的白衣天使 ·不孕不育的杏林奇葩 ·专卖店零售管理系统