动态文字特效代码汇编

 

 

实例 1:文字从左向右移动 效果

导指教惕园小临莅君诸迎欢烈热

以上文字从左向右(慢速)移动的代码如下↓:

<DIV align=center><MARQUEE style="WIDTH: 720px; HEIGHT: 100px" scrollAmount=2 direction=right>
<DIV style="FONT-SIZE: 30pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 40%;" scrollAmount="8" FONT>
<P align=center><FONT face=黑体><B>导指教惕园小临莅君诸迎欢烈热</B></FONT></P></DIV></MARQUEE></DIV>

说明字体的式样(face=黑体)颜色(color=black)和尺寸(SIZE: 30pt; )可以根据自己的需要改变;文字的移动方向(direction=right)也可以选择为向上(=up)、向下(=down) 向左(=left)、向右(direction=right).

注意:代码中的参数都可以根据自己的需要加以改变。

导指教惕园小临莅君诸迎欢烈热

以上文字从左向右(快速)移动的代码如下↓:

<DIV align=center><MARQUEE style="WIDTH: 720px; HEIGHT: 100px" scrollAmount=20 direction=right>
<DIV style="FONT-SIZE: 30pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 40%;" scrollAmount="8" FONT>
<P align=center><FONT face=黑体><B>导指教惕园小临莅君诸迎欢烈热</B></FONT></P></DIV></MARQUEE></DIV>

说明以上代码中的速度(时速由上例的 scrollAmount=2 改为 scrollAmount=20)字体和颜色没有改变;只是加快了速度,其中数值越大速度就越快.

注意:代码中的参数都可以根据自己的需要加以改变。

 

 

实例 2:毛绒边文字来回移动:效果

热烈欢迎诸位来宾莅临指

代码↓:

<DIV align=center><MARQUEE style="DISPLAY: block; FONT-SIZE: 30pt; FILTER: glow(color=#000000,strength=10); COLOR: #ffffff; HEIGHT: 60px; TEXT-ALIGN: center" scrollAmount=8 behavior=alternate width="95%" SPAN><KRAZY Doll><STRONG><EM><FONT face=黑体>热烈欢迎诸位来宾莅临指</FONT></EM></STRONG></MARQUEE></DIV>

说明:其中毛绒边和字的大小是style="DISPLAY: block; FONT-SIZE: 30pt; FILTER: glow 起的作用, 30pt; 数值越大字体越大,(color=#000000,strength=10); 是黑色的毛绒边,色码和数值右随变. COLOR: #ffffff; 是把字设为白色, 高度HEIGHT: 60px; 可根据字型的大小给于增减,scrollAmount=8 是移动的速度,behavior=alternate 是交替(来回)运动的指令,注:如果设为behavior=scroll 一圈一圈绕着走,设为behavior=slide 只走一次,设为behavior=alternate 就能来回不断的运动.

 

 

实例 3:文字左右相向移动:效果

教指教惕园小临光位诸迎欢烈热
热烈欢迎诸位光临小园惕教指导

代码↓:

<DIV align=center>
<MARQUEE style="FONT-SIZE: 30pt; WIDTH: 450px; LINE-HEIGHT: 60pt; FONT-FAMILY: 华文彩云; HEIGHT: 60px; FIL: glow(color=black)" scrollAmount=3 direction=right><FONT color=#6a3427>教指教惕园小临光位诸迎欢烈热</FONT></MARQUEE></DIV>
<DIV align=center>
<MARQUEE style="FONT-SIZE: 30pt; WIDTH: 450px; LINE-HEIGHT: 60pt; FONT-FAMILY: 华文彩云; HEIGHT: 60px; FIL: glow(color=black)" scrollAmount=3><FONT color=#6a3427>热烈欢迎诸位光临小园惕教指导</FONT></MARQUEE></DIV>

说明:本代码是由两组代码组成,上一组从左向右移动 direction=right ,下一组从右向左移动(不加方向代码).也就是凡是从右向左移动的,不需要加方向指令代码.

 

 

实例 4:跳跃式移动 效果

欢迎光临

代码↓:

<DIV align="center"><MARQUEE style="WIDTH: 600px; HEIGHT: 100px" scrollAmount=100 scrollDelay=500>
<DIV style="FILTER: shadow(color=#FF9999, strength=30); WIDTH: 400px; HEIGHT: 110px"><FONT face=华文彩云 color=#ff0033 size=7><B>
<CENTER><KRAZY Doll>欢迎光临</CENTER></B></FONT></DIV></MARQUEE></DIV>

说明其中:<scrolldelay=500>是延时,是时间数

 

 

实例 5: 文字左右反向移动:效果

欢迎欢迎热烈欢迎 欢迎烈热欢迎欢迎

代码↓:
<DIV align=center>
<MARQUEE style="WIDTH: 325px; HEIGHT: 60px" width=325><FONT face=隶书 color=#225a1f size=7><STRONG>欢迎欢迎热烈欢迎</STRONG></FONT></MARQUEE><FONT face=隶书 color=#973c3f size=7>
<MARQUEE style="WIDTH: 325px; HEIGHT: 60px" direction=right width=325><STRONG>欢迎烈热欢迎欢迎</STRONG></MARQUEE></FONT></DIV>

说明其中:width=325 数值是一半,左右二个width=325 加起来就是总宽度为650

 

 

实例 6: 添加框边文字由中间向上下移动:效果

 欢迎贵宾莅临惕教指导

 欢迎贵宾莅临惕教指导

代码↓:
<<DIV align=center>
<TABLE borderColor=#330000 cellSpacing=2 cellPadding=1 width=550 align=center bgColor=#ffffff background=http://img5.ph.126.net/sC2brSbqU1q-8hQEKRDYvw==/635851972406662575.gif border=5>
<TBODY>
<TR>
<TD>
<P align=center>
<MARQUEE style="FONT-SIZE: 30pt; WIDTH: 550px; LINE-HEIGHT: 15pt; FONT-FAMILY: 黑体; HEIGHT: 50px" scrollAmount=2 direction=up align="center"><FONT face=楷体_gb2312 color=#ffff00 size=7><STRONG>&nbsp;欢迎贵宾莅临惕教指导</STRONG></FONT></MARQUEE></P>
<P align=center>
<MARQUEE style="FONT-SIZE: 30pt; WIDTH: 550px; LINE-HEIGHT: 15pt; FONT-FAMILY: 黑体; HEIGHT: 50px" scrollAmount=2 direction=down>
<TABLE style="FIL: FlipV" align=center><FONT face=楷体_gb2312 color=#00ff00 size=7><STRONG>&nbsp;欢迎贵宾莅临惕教指导</STRONG></FONT><FONT color=#ae8d8d> </FONT>
<TBODY><FONT color=#ae8d8d></FONT></TBODY></TABLE></MARQUEE></P></FONT>
</TD></TR></TBODY></TABLE>

说明其中:宽度设为WIDTH: 550px是要根据字的多少决定,字数多需适当增宽。

 

 

实例 7: 向右波浪式移动的文字:效果

杨东小园欢迎您

代码↓:

<P align=center>
<MARQUEE style="WIDTH: 60%; HEIGHT: 200px" direction=up behavior=alternate width="60%">
<MARQUEE direction=right><FONT face=华文行楷 color=#ff0000 size=8><STRONG>杨东小园欢迎您</STRONG></FONT></MARQUEE></MARQUEE></P>

 

 

实例 8: 来回波浪式移动的文字:效果

杨东小园欢迎您

代码↓:

<DIV align=center>
<MARQUEE direction=up behavior=alternate width="60%">
<MARQUEE direction=right behavior=alternate><FONT face=华文行楷 color=#ff0000 size=8><STRONG>杨东小园欢迎您</STRONG></FONT></MARQUEE></MARQUEE></DIV>

 

 

 

实例 9: 交叉移动的多彩文字

代码↓:

 <<DIV align=center>
<MARQUEE style="WIDTH: 640px; HEIGHT: 160px" scrollAmount=1 direction=right behavior=alternate><B><FONT color=#7700bb size=5><FONT color=lime>
<MARQUEE direction=up behavior=alternate width=40 height=200 align="middle"><FONT color=#ff0000 size=6>欢</FONT></MARQUEE><FONT color=red>
<MARQUEE direction=up behavior=alternate width=40 height=150><FONT color=#0000ff size=6>迎</FONT></MARQUEE><FONT color=orange>
<MARQUEE direction=up behavior=alternate width=40 height=200><FONT color=#800000 size=6>诸</FONT></MARQUEE><FONT color=fuchsia>
<MARQUEE direction=up behavior=alternate width=40 height=150><FONT color=#ff0000 size=6>君</FONT></MARQUEE><FONT color=olive>
<MARQUEE direction=up behavior=alternate width=40 height=200><FONT color=#008000 size=6>莅</FONT></MARQUEE><FONT color=green>
<MARQUEE direction=up behavior=alternate width=40 height=150><FONT color=#800080 size=6>临</FONT></MARQUEE><FONT color=red>
<MARQUEE direction=up behavior=alternate width=40 height=200><FONT color=#ff0000 size=6>指</FONT></MARQUEE><FONT color=orange>
<MARQUEE direction=up behavior=alternate width=40 height=150><FONT color=#000000 size=6>导</FONT></MARQUEE><FONT color=orange></FONT></FONT></FONT></FONT></FONT></FONT>
</FONT></FONT></FONT></FONT></B></MARQUEE></DIV>

 

 

实例 10:从右向左移动的图片和字

 

欢迎朋友莅临指导

代码:

<DIV align=center>
<MARQUEE style="WIDTH: 71.95%; HEIGHT: 108px" scrollDelay=99 width="71.95%" height=108 border="0"><IMG src="http://img.bimg.126.net/photo/zo6oggJ8bZeAnpwq_IuKWA==/4544976448948422693.jpg"><FONT face=华文行楷 color=#4d4dff size=7><B>欢迎朋友莅临指导</B><IMG src="http://img.bimg.126.net/photo/J_4KAtR1IN-RbF6U-M5aqw==/2042382431013870816.jpg"></FONT></MARQUEE><FONT color=#000000></FONT></DIV
>

 

 

热烈欢迎诸位贵宾莅临本博赐教指导

 

杨东小园日志导向   本模块代码复制处
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

 

 

 

 

 

 

posted on 2016-11-01 17:52  飘渺的悠远  阅读(1935)  评论(0编辑  收藏  举报