分享

各种文字滚动和图片移动特效代码

 nj200801 2011-12-24

各种文字滚动和图片移动特效代码
 
 
 
一.基本代码举例:
<marquee direction=up behavior=scroll width=400 height=150 scrolldelay=80 scrollamount=1>插入文字(图片等)</marquee>
 
二.参数说明:

1)scrollAmount。它表示速度,值越大速度越快。如果没有它,默认为6,建议设为1~3比较好。

2)width和height。表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值。

3)direction。表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别为:right表示→→→,up表示↑,down表示↓。

4)scrollDelay。这也是用来控制速度的,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。

5)behavior。用它来控制属性,默认为循环滚动,可选的值有alternate(交替滚动)、slide(幻灯片效果,指的是滚动一次,然后停止滚动)
 
6)其他说明。marquee会移动、滚动的, center居中,top靠顶,bottom靠底,left靠左,……
 
三.实例效果:

 
 


 
00、欢迎您亲爱的朋友:
亲爱的朋友

 

01、向左移动:

从右向左移动

 


 
       
 
 
           
 
 
 

  

            
 
02、向右移动:
从左向右移动
                 
 
       
 
 

03、向上移动:

向上移动速度5居中

 
 

 
04、向下移动:

 

 
 
向下移动速度5居中
向下移动速度2

05、来回移动:


 
 
 
 
来回移动速度10宽度100%
来回移动速度2宽度100%

06、竖排字渐出:

 

水调歌头·明月几时有

苏轼

明月几时有?把酒问青天。

不知天上宫阙,今夕是何年。

我欲乘风归去,又恐琼楼玉宇,高处不胜寒。

起舞弄清影,何似在人间。

转朱阁,低绮户,照无眠。

不应有恨,何事长向别时圆?

人有悲欢离合,月有阴晴圆缺,此事古难全。

但愿人长久,千里共婵娟。

 
07、中间向两边移动:
 


中间向两边移动宽度220高度50居中

中间向两边移动宽度220高度50居中
 
 
 
08、中间相对上下移动文字或画面相颠倒似有倒影:
中间相对上下移动有倒影
中间相对上下移动有倒影
 
 
 
09、中间相对上下移动文字或画面均朝上:
中间相对上下移动
中间相对上下移动
 
 
 
 
 
 
 
10、上下起伏:
  
上下起伏高度500
上下起伏高度100
上下起伏高度60
 
 
 
 
 
 
11、图片对开移动百叶效果:
 
 
 
12、图片中加入文字:
 
 
 

 

 

明月几时有?把酒问青天。

人有悲欢离合,月有阴晴圆缺,此事古难全。

但愿人长久,千里共婵娟。

 

 

13、 整体文字向上移动:
 

各种文字滚动和图片移动特效代码
 
一.基本代码:
<marquee direction=up behavior=scroll width=400 height=150 scrolldelay=80 scrollamount=1>插入文字(图片等)</marquee>
 
二.参数说明:
 
1)scrollAmount。它表示速度,值越大速度越快。如果没有它,默认为6,建议设为1~3比较好。

2)width和height。表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值。

3)direction。表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别为:right表示→→→,up表示↑,down表示↓。

4)scrollDelay。这也是用来控制速度的,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。

5)behavior。用它来控制属性,默认为循环滚动,可选的值有alternate(交替滚动)、slide(幻灯片效果,指的是滚动一次,然后停止滚动)
 
三.实例效果:

四.实例代码:
 
 
 
 
 
14、一步一停:
 
 
 
一步一停!
 

 
15、图片无间隙滚动: 
 
 
 
 
16、图片移动加FLASH特效
 
 
 
17、图片忽隐忽现移动
 
 
 
 
18、移动字加底色
 
恰当地使用各种文字滚动和图片移动特效,可以使您的帖子更加精彩!
恰当地使用各种文字滚动和图片移动特效,可以使您的帖子更加精彩! 恰当地使用各种文字滚动和图片移动特效,可以使您的帖子更加精彩! 恰当地使用各种文字滚动和图片移动特效,可以使您的帖子更加精彩! 恰当地使用各种文字滚动和图片移动特效,可以使您的帖子更加精彩! 恰当地使用各种文字滚动和图片移动特效,可以使您的帖子更加精彩! 恰当地使用各种文字滚动和图片移动特效,可以使您的帖子更加精彩! 恰当地使用各种文字滚动和图片移动特效,可以使您的帖子更加精彩! 恰当地使用各种文字滚动和图片移动特效,可以使您的帖子更加精彩! 恰当地使用各种文字滚动和图片移动特效,可以使您的帖子更加精彩!
 
 
 
 
 
四.实例代码:
 
00、欢迎您亲爱的朋友:
 
<MARQUEE style="HEIGHT: 80px" direction=right behavior=alternate scrollAmount=8><FONT
size=6 colorred>
<MARQUEE direction=up height=60 behavior=alternate width=40 align="middle"><FONT color=red>
欢</FONT></MARQUEE><FONT color=red>
<MARQUEE direction=up height=80 behavior=alternate width=40>迎</MARQUEE><FONT color=red>
<MARQUEE direction=up height=60 behavior=alternate width=40>您</MARQUEE><STRONG>亲爱的朋友
</STRONG></FONT></FONT></FONT></FONT></MARQUEE></DIV>
 
01、向左移动:
 
<MARQUEE><FONT color=#339966><STRONG>从右向左移动</STRONG></FONT></MARQUEE></DIV>
<P> </P>
<DIV><BR></DIV><FONT color=#800000><STRONG>
<MARQUEE scrollAmount=1> <IMG
></DIV>
<MARQUEE>
<DIV><IMG
></DIV>
<MARQUEE scrollAmount=4>
<DIV><IMG
></DIV>
></DIV>
>

02、向右移动:
 
<MARQUEE direction=right><FONT color=#339966><STRONG>从左向右移动</STRONG></FONT></MARQUEE>
<DIV>
<MARQUEE direction=right scrollAmount=1>
<DIV><IMG
width=72 height=91><IMG style="WIDTH: 68px; HEIGHT: 58px" class=restrictImg
height=58></DIV></MARQUEE></DIV>
<MARQUEE direction=right scrollAmount=2>
<DIV><IMG src="http://userimage2.360doc.com/11/1222/22/605353_201112222248300770.gif"><IMG
></DIV>
<MARQUEE direction=right scrollAmount=8><IMG
>

03、向上移动:
 
<MARQUEE direction=up scrollAmount=5>
<CENTER><FONT color=#339966><STRONG>向上移动速度5居中</STRONG></FONT> </CENTER></MARQUEE>
<DIV><BR> </DIV>
<DIV>
<DIV> </DIV>
<MARQUEE direction=up scrollAmount=2>
<P align=center><IMG
 

04、向下移动:
 
<MARQUEE direction=down scrollAmount=5>
<CENTER>
<DIV> </DIV>
<DIV><IMG src="http://image7.360doc.com/DownloadImg/2010/03/1017/2514517_2.gif"></DIV>
<DIV> </DIV><FONT color=#339966><STRONG>向下移动速度5居中
</STRONG></FONT></CENTER></MARQUEE>
<MARQUEE direction=down scrollAmount=2><FONT color=#339966><STRONG>向下移动速度
2</STRONG></FONT></MARQUEE>

 
05、来回移动:
 
<MARQUEE behavior=alternate width="100%" scrollAmount=3>
<DIV><IMG
height=220 type=application/x-shockwave-flash width=200
src=http://disk.kugou.com/player/0/5/0/1/default/200/818F1C0712C68090/list.swf
wmode="transparent"><IMG
src="http://userimage2.360doc.com/11/1223/23/605353_201112232355490410.gif"></DIV>
<DIV> </DIV> 
<DIV></DIV>
<DIV> </DIV></MARQUEE></DIV>
<DIV>
<MARQUEE behavior=alternate width="100%" scrollAmount=10><FONT color=#339966><STRONG>来回移
动速度10宽度100%</STRONG></FONT></MARQUEE></DIV>
<DIV>
<MARQUEE behavior=alternate width="100%" scrollAmount=2><FONT color=#339966><STRONG>来回移
动速度2宽度100%</STRONG></FONT></MARQUEE></DIV>
 
 
06、竖排字渐出:
 
<DIV>
<MARQUEE height=608 behavior=slide width=550 loop=1 scrollAmount=1 scrollDelay=100>
<MARQUEE direction=up height=600 width=550 scrollAmount=1 scrollDelay=100>
<DIV><IMG
src="http://userimage2.360doc.com/11/0902/12/605353_201109021253550714.gif"></DIV>
<P> </P><FONT color=#ff0000>
<P style="TEXT-INDENT: 2em">水调歌头·明月几时有</P>
<P style="TEXT-INDENT: 2em">苏轼</P>
<P style="TEXT-INDENT: 2em">明月几时有?把酒问青天。</P>
<P style="TEXT-INDENT: 2em">不知天上宫阙,今夕是何年。</P>
<P style="TEXT-INDENT: 2em">我欲乘风归去,又恐琼楼玉宇,高处不胜寒。</P>
<P style="TEXT-INDENT: 2em">起舞弄清影,何似在人间。</P>
<P style="TEXT-INDENT: 2em">转朱阁,低绮户,照无眠。</P>
<P style="TEXT-INDENT: 2em">不应有恨,何事长向别时圆?</P>
<P style="TEXT-INDENT: 2em">人有悲欢离合,月有阴晴圆缺,此事古难全。</P>
<P style="TEXT-INDENT: 2em">但愿人长久,千里共婵娟。</P>
<P style="TEXT-INDENT: 2em"></P></FONT></MARQUEE></MARQUEE></DIV>
 
 
07、中间向两边移动:
 
<DIV>
<CENTER><BR>
<MARQUEE height=50 width=220><BR><FONT color=#339966><STRONG>中间向两边移动宽度220高度50居
中</STRONG></FONT></MARQUEE>
<MARQUEE direction=right height=50 width=220><BR><FONT color=#339966><STRONG>中间向两边移动
宽度220高度50居中</STRONG></FONT><BR></MARQUEE></CENTER>
<CENTER>
<DIV> </DIV>
<CENTER>
<MARQUEE height=275 width=220 scrollAmount=3><A><IMG
height=275></A> <A><IMG
height=275></A></MARQUEE>
<MARQUEE direction=right height=275 width=220 scrollAmount=3><A><IMG
height=275></A> <A><IMG
height=275></A></MARQUEE></CENTER></CENTER></DIV>
 

08、中间相对上下移动文字或画面相颠倒似有倒影:
 
<DIV>
<MARQUEE onmouseover=this.stop() onmouseout=this.start direction=up scrollAmount=3>
<CENTER><FONT color=#339966><STRONG>中间相对上下移动有倒影
</STRONG></FONT></CENTER></MARQUEE></DIV>
<CENTER></CENTER>
<DIV>
<MARQUEE direction=down scrollAmount=3>
<CENTER>
<DIV style="FILTER: flipv; WIDTH: 400px"><FONT color=#339966><STRONG>中间相对上下移动有倒影
</STRONG></FONT></DIV></CENTER></MARQUEE></DIV>
<DIV>
<MARQUEE onmouseover=this.stop() onmouseout=this.start direction=up scrollAmount=3>
<CENTER>
<DIV><IMG
</MARQUEE></DIV>
<CENTER></CENTER>
<DIV>
<MARQUEE direction=down scrollAmount=3>
<CENTER>
<DIV style="FILTER: flipv; WIDTH: 400px">
<DIV><IMG
ENTER></MARQUEE>
 

09、中间相对上下移动文字或画面均朝上:

<MARQUEE direction=up scrollAmount=3>
<CENTER><FONT color=#339966><STRONG>中间相对上下移动
</STRONG></FONT></CENTER></MARQUEE></DIV>
<CENTER></CENTER>
<DIV>
<MARQUEE direction=down scrollAmount=3>
<CENTER><FONT color=#339966><STRONG>中间相对上下移动
</STRONG></FONT></CENTER></MARQUEE>
 
<MARQUEE direction=up scrollAmount=3>
<CENTER><IMG
UEE>
<MARQUEE direction=down scrollAmount=3>
<CENTER><IMG
UEE>
 

10、上下起伏:

<MARQUEE>
<MARQUEE direction=up height=500 behavior=alternate><FONT color=#339966><STRONG>上下起伏高
度500</STRONG></FONT><IMG
QUEE>
<MARQUEE>
<MARQUEE direction=up height=100 behavior=alternate><FONT color=#339966><STRONG>上下起伏高
度100</STRONG></FONT></MARQUEE></MARQUEE>
<MARQUEE>
<MARQUEE direction=up height=60 behavior=alternate><FONT color=#339966><STRONG>上下起伏高度
60</STRONG></FONT></MARQUEE></MARQUEE>
 

11、图片对开移动百叶效果:

<TABLE border=0 cellSpacing=0 cellPadding=0 width=500 align=center>
<TBODY>
<TD align=middle>
<MARQUEE direction=right width=120 scrollAmount=1 scrollDelay=100><IMG
src="http://userimage2.360doc.com/11/1223/23/605353_201112232326220676.jpg"></MARQUEE></TD>
<TD align=middle>
<MARQUEE width=120 scrollAmount=1 scrollDelay=100><IMG
src="http://userimage2.360doc.com/11/1223/23/605353_201112232326220676.jpg"></MARQUEE></TD>
<TD align=middle>
<MARQUEE direction=right width=120 scrollAmount=1 scrollDelay=100><IMG
src="http://userimage2.360doc.com/11/1223/23/605353_201112232326220676.jpg"></MARQUEE></TD>
<TD align=middle>
<MARQUEE width=120 scrollAmount=1 scrollDelay=100><IMG
 

12、图片中加入文字:
 
<CENTER style="TEXT-INDENT: 2em"> </CENTER>
<CENTER style="TEXT-INDENT: 2em">
<TABLE border=3 cellSpacing=0 cellPadding=0 width=410
background=http://image7.360doc.com/DownloadImg/2010/01/2322/2216380_5.jpg align=center
height=312>
<TBODY>
<TR>
<TD>
<P> </P>
<P style="TEXT-INDENT: 2em">
<MARQUEE direction=up scrollAmount=3>
<P> </P>
<P style="TEXT-INDENT: 2em"><FONT color=#ff0000>明月几时有?把酒问青天。</FONT></P>
<P style="TEXT-INDENT: 2em"><FONT color=#ff0000>人有悲欢离合,月有阴晴圆缺,此事古难全。
</FONT></P>
<P style="TEXT-INDENT: 2em"><FONT color=#ff0000>但愿人长久,千里共婵娟。
</FONT></P></MARQUEE></P></TD></TR></TBODY></TABLE></CENTER>

 
13、 整体文字向上移动:
 
<MARQUEE direction=up scrollAmount=1>
<P align=left>
<DIV><FONT style="FONT-FAMILY: 楷体_GB2312; FONT-SIZE: 18px" color=#008000><STRONG>各种文字
滚动和图片移动特效代码<BR style="FONT-FAMILY: "></STRONG></FONT></DIV>
<DIV><FONT style="FONT-FAMILY: 楷体_GB2312; FONT-SIZE: 18px"
color=#008000><STRONG></STRONG></FONT> </DIV>
<DIV><FONT style="FONT-FAMILY: 楷体_GB2312; FONT-SIZE: 18px" color=#008000><STRONG>一.基本
代码: <BR style="FONT-FAMILY: "></DIV></STRONG></FONT>
<DIV><FONT style="FONT-FAMILY: 楷体_GB2312; FONT-SIZE: 18px"
color=#008000><STRONG><marquee direction=up behavior=scroll width=400 height=150
scrolldelay=80 scrollamount=1>插入文字(图片等)</marquee> <BR style="FONT-FAMILY:
"></STRONG></FONT></DIV>
<DIV><FONT style="FONT-FAMILY: 楷体_GB2312; FONT-SIZE: 18px"
color=#008000><STRONG></STRONG></FONT> </DIV>
<DIV><FONT style="FONT-FAMILY: 楷体_GB2312; FONT-SIZE: 18px" color=#008000><STRONG>二.参数
说明:</STRONG></FONT></DIV>
<DIV>
<DIV><FONT color=#008000></FONT><FONT style="FONT-FAMILY: 楷体_GB2312; FONT-SIZE:
18px"><STRONG> </STRONG></FONT></DIV>
<DIV><FONT style="FONT-FAMILY: 楷体_GB2312; FONT-SIZE: 18px" color=#008000><STRONG>1)
scrollAmount。它表示速度,值越大速度越快。如果没有它,默认为6,建议设为1~3比较好。
</STRONG></FONT></DIV>
<P><FONT style="FONT-FAMILY: 楷体_GB2312; FONT-SIZE: 18px" color=#008000><STRONG>2)width和
height。表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设
height的值。</STRONG></FONT></P>
<P><FONT style="FONT-FAMILY: 楷体_GB2312; FONT-SIZE: 18px" color=#008000><STRONG>3)
direction。表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别
为:right表示→→→,up表示↑,down表示↓。</STRONG></FONT></P>
<P><FONT style="FONT-FAMILY: 楷体_GB2312; FONT-SIZE: 18px" color=#008000><STRONG>4)
scrollDelay。这也是用来控制速度的,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置
的。</STRONG></FONT></P>
<DIV><FONT style="FONT-FAMILY: 楷体_GB2312; FONT-SIZE: 18px" color=#008000><STRONG>5)
behavior。用它来控制属性,默认为循环滚动,可选的值有alternate(交替滚动)、slide(幻灯片效果,
指的是滚动一次,然后停止滚动)</STRONG></FONT></DIV>
<DIV><FONT color=#008000></FONT><FONT style="FONT-FAMILY: 楷体_GB2312; FONT-SIZE:
18px"><STRONG> </STRONG></FONT></DIV>
<DIV><FONT style="FONT-FAMILY: 楷体_GB2312; FONT-SIZE: 18px" color=#008000><STRONG>三.实例
效果: </STRONG></FONT>
<DIV><BR><FONT style="FONT-FAMILY: 楷体_GB2312; FONT-SIZE: 18px" color=#008000><STRONG>四.
实例代码:</STRONG></FONT></DIV>
<DIV> </DIV></DIV></DIV></MARQUEE>
 

14、一步一停:

<MARQUEE scrollAmount=100 scrollDelay=500>
<DIV><IMG
></DIV>
<DIV> </DIV>
<MARQUEE scrollAmount=100 scrollDelay=500><FONT style="FONT-FAMILY: 黑体"
color=#00ff00><STRONG style="FONT-FAMILY: ">一步一停!</STRONG></FONT></MARQUEE>
<DIV> </DIV>
<DIV>
<MARQUEE scrollAmount=3 scrollDelay=500>
<DIV><IMG
></DIV><BR></DIV>
 
 
15、图片无间隙滚动:

<TABLE border=0 cellPadding=0 width=600
background=http://userimage2.360doc.com/11/1225/11/605353_201112251159320121.jpg
align=center height=413>
<TBODY>
<TR>
<TD>
<DIV align=center>
<MARQUEE direction=down height=413 width=600 scrollAmount=4>
<MARQUEE direction=up height=413 width=600 scrollAmount=4><IMG title='style="HEIGHT:'
height=413 500px?></MARQUEE></MARQUEE>
 

16、图片移动加FLASH特效
 
<MARQUEE scrollAmount=3 directio="down">
<TABLE border=0 cellSpacing=0 borderColor=#000000 cellPadding=0
background=http://userimage2.360doc.com/11/1225/21/605353_201112252137210331.gif>
<TBODY>
<TR>
<TD><EMBED height=210 type=application/x-shockwave-flash width=303
src=http://xt./106939/uploadpic/2009051216250654711.swf wmode="transparent"
invokeURLs="false" quality="high" allowScriptAccess="never" menu="false"
allowNetworking="internal"></EMBED></TD></TR></TBODY></TABLE></MARQUEE>
 

17、图片忽隐忽现移动
 
<MARQUEE beha>
<MARQUEE direction=right width=150 beha><IMG
QUEE>
 

18、移动字加底色
 
<MARQUEE bgColor=#aaaaee scrollAmount=2>
<DIV><FONT color=#ff0000>恰当地使用各种文字滚动和图片移动特效,可以使您的帖子更加精彩!
</FONT></DIV></MARQUEE>
 
 
<MARQUEE style="FONT-SIZE: 25pt; FILTER: shadow(color=FFFF33 ); WIDTH: 100%; COLOR: #ff0000; FONT-FAMILY: 隶书" scrollAmount=3 FONT>恰当地使用各种文字滚动和图片移动特效,可以使您的帖子更加精彩!</MARQUEE>
<MARQUEE style="FONT-SIZE: 20pt; FILTER: dropshadow(color=#228B22,offX=5,offY=3,Positive=1); WIDTH: 100%; COLOR: #ff7f50; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书" scrollAmount=3 FONT><STRONG>恰当地使用各种文字滚动和图片移动特效,可以使您的帖子更加精彩!</STRONG></FONT></MARQUEE>
<MARQUEE style="FONT-SIZE: 30pt; FILTER: wave(add=0,lightstrength=50,strength=3,freq=2,phrase=10); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 100%; FONT-FAMILY: 隶书" scrollAmount=3 FONT><STRONG>恰当地使用各种文字滚动和图片移动特效,可以使您的帖子更加精彩!</STRONG></FONT></MARQUEE>
<MARQUEE style="FONT-SIZE: 30pt; FILTER: shadow(color=#AF0530); WIDTH: 100%; COLOR: #f90b46; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书" scrollAmount=3 FONT><STRONG>恰当地使用各种文字滚动和图片移动特效,可以使您的帖子更加精彩!</STRONG></FONT></MARQUEE>
<MARQUEE style="FONT-SIZE: 30pt; FILTER: glow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书" scrollAmount=3 FONT><STRONG>恰当地使用各种文字滚动和图片移动特效,可以使您的帖子更加精彩!</STRONG></FONT></MARQUEE>
<MARQUEE style="FONT-SIZE: 30pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书" scrollAmount=3 FONT><STRONG>恰当地使用各种文字滚动和图片移动特效,可以使您的帖子更加精彩!</STRONG></MARQUEE>
<MARQUEE style="FONT-SIZE: 40pt; FILTER: shadow(color=green); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书" scrollAmount=3 FONT><STRONG>恰当地使用各种文字滚动和图片移动特效,可以使您的帖子更加精彩!</STRONG></FONT></MARQUEE>
<MARQUEE style="FONT-SIZE: 40pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #cc0033; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书" scrollAmount=3 FONT><STRONG>恰当地使用各种文字滚动和图片移动特效,可以使您的帖子更加精彩!</STRONG></FONT></MARQUEE>
<MARQUEE style="FILTER: shadow(color=#3300FF, strength=8); WIDTH: 490px" scrollAmount=3 DIV><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=隶书 color=#33ffff>恰当地使用各种文字滚动和图片移动特效,可以使您的帖子更加精彩!</FONT><BR><DIV></DIV></MARQUEE>
 
 
 
 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约