分享

图片上移动的文字代码

 冰人书馆 2015-01-07

图片上移动的文字代码


一、在图片加入向上滚动字幕

文字向上滚动代码:

<MARQUEE style="WIDTH: 600px; HEIGHT: 100px" scrollAmount=2 direction=up>

<FONT face=隶书 color=#ff00ff size=4>置入文字</FONT></MARQUEE>

注:scrollAmount=2   是控制字速,数值越大字速就越快!

       direction=up  是向上的方向。

代码:

<TABLE height=300 cellPadding=10 width=500 align=center

background=http://image80.360doc.com/DownloadImg/2015/01/0712/48826065_5.jpg

border=3 table="0">

<TBODY>

<TR>

<TD>

<DIV align=center>

<MARQUEE style="WIDTH: 380px; HEIGHT: 84px" scrollAmount=2 direction=up

height=84>

<DIV align=center><FONT face=楷体_GB2312 color=#330033 size=4>图片中加入上滚文字

</FONT></DIV>

<DIV align=center><FONT face=楷体_GB2312 color=#CC0033 size=4>上滚的高度可以调整

</FONT></DIV>

<DIV align=center><FONT face=楷体_GB2312 color=#996633 size=4>上滚的速度可以调整

</FONT></DIV>

<DIV align=center><FONT face=楷体_GB2312><FONT size=4><FONT color=#FFCC00>

闲散人也欢迎您光临

</FONT></FONT></FONT></DIV></FONT></MARQUEE>

</DIV></TD></TR></TBODY></TABLE>

效果:

图片中加入上滚文字
上滚的高度可以调整
上滚的速度可以调整
闲散人也欢迎您光临

二、在图片上加入左右移动字幕

左右移动代码:

<MARQUEE  behavior=alternate scrollAmount=2><FONT face=隶书

color=#ff00ff size=4>置入文字</FONT></MARQUEE>

代码:

<TABLE height=300 cellPadding=10 width=500 align=center

 background=http://image80.360doc.com/DownloadImg/2015/01/0712/48826065_5.jpg

border=3 table="0">

<TBODY>

<TR>

<TD>

<DIV align=center>

<MARQUEE  behavior=alternate><FONT face=隶书 color=#ff00ff size=4>

图片上加入左右移动文字</FONT></MARQUEE>

<br>

 <MARQUEE  behavior=alternate><FONT face=隶书 color=#ff00ff size=4>

左右移动的宽度可以调整</FONT></MARQUEE>

<br>

 <MARQUEE  behavior=alternate><FONT face=隶书 color=#ff00ff size=4>

左右移动的速度可以调整</FONT></MARQUEE>

<br>

 <MARQUEE  behavior=alternate><FONT face=隶书 color=#ff00ff size=4>

闲散人也欢迎您的光临!</FONT></MARQUEE>

</DIV></TR></TBODY></TABLE>

效果:

图片上加入左右移动文字
左右移动的宽度可以调整
左右移动的速度可以调整
闲散人也欢迎您的光临!

三、在图片上加入从右向左滚动字幕

从右向左滚动代码:

<MARQUEE  scrollAmount=2 direction=right><FONT face=隶书 color=#ff00ff size=4>

置入文字</FONT></MARQUEE>

注:向左移动:direction=left

        向右移动:direction=right

代码:

<TABLE height=300 cellPadding=10 width=500 align=center

background=http://image80.360doc.com/DownloadImg/2015/01/0712/48826065_5.jpg

border=3 table="0">

<TBODY>

<TR>

<TD>

</EMBED><BR><BR>

<DIV align=center>

<MARQUEE style="WIDTH: 302px; HEIGHT: 100px" scrollAmount=2

direction=right height=100><FONT color=#ff00ff>

<P align=center><FONT face=隶书 color=#0000ff size=4>从左向右移动的字

</FONT></P>

<P align=center><FONT face=隶书 color=#ff0000 size=4>移动速度可以调整

</FONT></P>

<P align=center><FONT face=隶书 color=#00ffff size=4>移动的宽度可以调整

</FONT></P>

<P align=center><FONT face=隶书 color=#ff00ff size=4>闲散人也欢迎您!

</FONT></P></FONT></MARQUEE>

</DIV></TD></TR></TBODY></TABLE>

效果:



从左向右移动的字

移动速度可以调整

移动的宽度可以调整

闲散人也欢迎您!

;注:

兰色:背景网址(可换)

绿色:放入文字的位置和格式

 上面代码中的两行主要命令语句的含义:

<IMG src=…….>控制曰志中的背景图片,图片的宽度及高度值均以px为单位;align这一参数控制图片位置,但不要对此进行更改,否则无法实现文字浮于图片之上的效果。Filter控制背景图片的柔化滤镜,大家可以修改其中的数值已达到不同的效果,但注意style的值只能取1、2、3这三个数值。除了柔化效果外,还有翻转、发光、阴影等若干特效,但语法表述各有不同,在此不再赘述,有兴趣的朋友可以在互联网上查询相关语法。在Space空间不同的布局方式下,曰志宽度是不相同的,所以为了更好的配合曰志的页面效果,建议选择合适宽度的图片,具体可根据布局的实际情况(即曰志的宽窄程度)将图片宽度分别设定在260px、350px、370px、550px、730px左右的近似值。

<DIV style="FILTER…….>控制曰志文字的若干效果,其中Filter命令的使用方法与前述一致,也是调节柔化效果。文本宽度也采取px为单位,其最大值也要参照上面不同布局方式时所要求的近似宽度值,如果你希望文字完全分布在整个曰志页面上,那么将WIDTH值设为100%即可。在设定了具体宽度的情况下Float命令可以省略,否则请予以保留。


图片上移动的文字代码 - 闲散人也 -

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

    0条评论

    发表

    请遵守用户 评论公约