在图片上添加文字定位跳跃代码很有趣喔

晓清发表于 2012-1-9 15:33:31

本帖最后由 II.〆兮忆° 于 2012-1-9 15:23 编辑 <br /><br />效果图一代码
<DIV align=center>
<TABLE style="BORDER-BOTTOM: #ff0000 10px ridge; BORDER-LEFT: #ff0000 10px ridge; BACKGROUND-COLOR: #f5fffa; BORDER-TOP: #ff0000 10px ridge; BORDER-RIGHT: #ff0000 10px ridge" cellSpacing=30>
<TBODY>
<TR>
<TD>
<TABLE border=3 borderColorDark=red width=480 background=http://bbs.ii23.cn/data/attachment/album/201112/05/233058ix5goli4t0idxics.jpg height=520>
<TBODY>
<TR>
<TD>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<DIV align=center>
<P style="MARGIN-TOP: 0px; MARGIN-LEFT: 30px" align=left><FONT color=red size=25>
<MARQUEE direction=up height=120 behavior=alternate width=60>一</MARQUEE></FONT></P>
<P style="MARGIN-TOP: -20px; MARGIN-LEFT: 140px" align=left><FONT color=red size=25>
<MARQUEE direction=up height=120 behavior=alternate width=60>定</MARQUEE></FONT></P>
<P style="MARGIN-TOP: -20px; MARGIN-LEFT: 250px" align=left><FONT color=red size=25>
<MARQUEE direction=up height=120 behavior=alternate width=60>要</MARQUEE></FONT></P>
<P style="MARGIN-TOP: -230px; MARGIN-LEFT: 360px" align=left><FONT color=red size=25>
<MARQUEE direction=up height=120 behavior=alternate width=60>开</MARQUEE></FONT></P>
<P style="MARGIN-TOP: -230px; MARGIN-LEFT: 470px" align=left><FONT color=red size=25>
<MARQUEE direction=up height=120 behavior=alternate width=60>心</MARQUEE></FONT></P></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>二效果图
<DIV align=center>
<TABLE style="BORDER-BOTTOM: #7fffd4 15px ridge; BORDER-LEFT: #7fffd4 15px ridge; OVERFLOW: hidden; BORDER-TOP: #7fffd4 15px ridge; BORDER-RIGHT: #7fffd4 15px ridge; LEFT: 0px" border=0 cellSpacing=30 cellPadding=0 width=550 background=http://www.chaojiqq.cn/attachments/2010/04/1_2010040103212117sHO.gif align=center height=600>
<TBODY>
<TR>
<TD>
<P align=center> <IMG src="http://pic2.duowan.com/wulin2/0904/103806540333/103806858365.gif"></P>
<DIV align=center>
<P style="MARGIN-TOP: 0px; MARGIN-LEFT: 30px" align=left><FONT color=red size=25>
<MARQUEE style="WIDTH: 60px; HEIGHT: 107px" direction=up height=107 behavior=alternate width=60>学</MARQUEE></FONT></P>
<P style="MARGIN-TOP: -20px; MARGIN-LEFT: 140px" align=left><FONT color=yellow size=25>
<MARQUEE style="WIDTH: 126px; HEIGHT: 77px" direction=up height=77 behavior=alternate width=126>学</MARQUEE></FONT></P>
<P style="MARGIN-TOP: -20px; MARGIN-LEFT: 250px" align=left><FONT color=dodgerblue size=25></FONT></P>
<P style="MARGIN-TOP: -230px; MARGIN-LEFT: 360px" align=left><FONT color=lime size=25></FONT></P>
<P style="MARGIN-TOP: 0px; MARGIN-LEFT: 30px" align=left><FONT color=red size=25>
<MARQUEE style="WIDTH: 140px; HEIGHT: 95px" direction=up height=95 behavior=alternate width=140>院</MARQUEE></FONT></P>
<P style="MARGIN-TOP: -20px; MARGIN-LEFT: 140px" align=left><FONT color=yellow size=25></FONT> </P>
<P style="MARGIN-TOP: -20px; MARGIN-LEFT: 250px" align=left><FONT color=yellow size=25>
<MARQUEE direction=up height=120 behavior=alternate width=60>习</MARQUEE></FONT></P>
<P style="MARGIN-TOP: -230px; MARGIN-LEFT: 360px" align=left><FONT color=yellow size=25>
<MARQUEE direction=up height=120 behavior=alternate width=60>咯</MARQUEE></FONT><FONT color=fuchsia size=25></FONT></P></DIV>
<P> </P>
<P>     </P>
<P> </P>
<P> </P>
<P>     </P>
<P> </P>
<P> </P>
<P> </P>
<P align=left><FONT color=#55f87e size=5 face=楷体_GB2312><FONT color=#000000 size=3 face=宋体>   </FONT></FONT></P></TD></TR></TBODY></TABLE></DIV>

晓清发表于 2012-1-9 15:33:32

本帖最后由 II.〆兮忆° 于 2012-1-9 15:45 编辑

《滚动文字特效代码之二》对比效果，通过设置文字跳跃参数，巧妙地将文字进行了特别排列，并与背景图结合成新颖的表现形式。您可以用自己的照片或图片，换上想说的话制作一幅吧。用不同风格的图片素材为背景制作。达到不同效果，以上图供朋友参考。建议您直接复制效果图代码。发挥你的智慧，创作出更美的佳作。
效果图一代码
<DIV align=center>
<TABLE style="BORDER-BOTTOM: #ff0000 10px ridge; BORDER-LEFT: #ff0000 10px ridge; BACKGROUND-COLOR: #f5fffa; BORDER-TOP: #ff0000 10px ridge; BORDER-RIGHT: #ff0000 10px ridge" cellSpacing=30>
<TBODY>
<TR>
<TD>
<TABLE border=3 borderColorDark=red width=480 background=http://bbs.ii23.cn/data/attachment/album/201112/05/233058ix5goli4t0idxics.jpg height=520>
<TBODY>
<TR>
<TD>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<DIV align=center>
<P style="MARGIN-TOP: 0px; MARGIN-LEFT: 30px" align=left><FONT color=red size=25>
<MARQUEE direction=up height=120 behavior=alternate width=60>一</MARQUEE></FONT></P>
<P style="MARGIN-TOP: -20px; MARGIN-LEFT: 140px" align=left><FONT color=red size=25>
<MARQUEE direction=up height=120 behavior=alternate width=60>定</MARQUEE></FONT></P>
<P style="MARGIN-TOP: -20px; MARGIN-LEFT: 250px" align=left><FONT color=red size=25>
<MARQUEE direction=up height=120 behavior=alternate width=60>要</MARQUEE></FONT></P>
<P style="MARGIN-TOP: -230px; MARGIN-LEFT: 360px" align=left><FONT color=red size=25>
<MARQUEE direction=up height=120 behavior=alternate width=60>开</MARQUEE></FONT></P>
<P style="MARGIN-TOP: -230px; MARGIN-LEFT: 470px" align=left><FONT color=red size=25>
<MARQUEE direction=up height=120 behavior=alternate width=60>心</MARQUEE></FONT></P></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>二效果图代码
<DIV align=center>
<TABLE style="BORDER-BOTTOM: #7fffd4 15px ridge; BORDER-LEFT: #7fffd4 15px ridge; OVERFLOW: hidden; BORDER-TOP: #7fffd4 15px ridge; BORDER-RIGHT: #7fffd4 15px ridge; LEFT: 0px" border=0 cellSpacing=30 cellPadding=0 width=550 background=http://www.chaojiqq.cn/attachments/2010/04/1_2010040103212117sHO.gif align=center height=600>
<TBODY>
<TR>
<TD>
<P align=center> <IMG src="http://pic2.duowan.com/wulin2/0904/103806540333/103806858365.gif"></P>
<DIV align=center>
<P style="MARGIN-TOP: 0px; MARGIN-LEFT: 30px" align=left><FONT color=red size=25>
<MARQUEE style="WIDTH: 60px; HEIGHT: 107px" direction=up height=107 behavior=alternate width=60>学</MARQUEE></FONT></P>
<P style="MARGIN-TOP: -20px; MARGIN-LEFT: 140px" align=left><FONT color=yellow size=25>
<MARQUEE style="WIDTH: 126px; HEIGHT: 77px" direction=up height=77 behavior=alternate width=126>学</MARQUEE></FONT></P>
<P style="MARGIN-TOP: -20px; MARGIN-LEFT: 250px" align=left><FONT color=dodgerblue size=25></FONT></P>
<P style="MARGIN-TOP: -230px; MARGIN-LEFT: 360px" align=left><FONT color=lime size=25></FONT></P>
<P style="MARGIN-TOP: 0px; MARGIN-LEFT: 30px" align=left><FONT color=red size=25>
<MARQUEE style="WIDTH: 140px; HEIGHT: 95px" direction=up height=95 behavior=alternate width=140>院</MARQUEE></FONT></P>
<P style="MARGIN-TOP: -20px; MARGIN-LEFT: 140px" align=left><FONT color=yellow size=25></FONT> </P>
<P style="MARGIN-TOP: -20px; MARGIN-LEFT: 250px" align=left><FONT color=yellow size=25>
<MARQUEE direction=up height=120 behavior=alternate width=60>习</MARQUEE></FONT></P>
<P style="MARGIN-TOP: -230px; MARGIN-LEFT: 360px" align=left><FONT color=yellow size=25>
<MARQUEE direction=up height=120 behavior=alternate width=60>咯</MARQUEE></FONT><FONT color=fuchsia size=25></FONT></P></DIV>
<P> </P>
<P>     </P>
<P> </P>
<P> </P>
<P>     </P>
<P> </P>
<P> </P>
<P> </P>
<P align=left><FONT color=#55f87e size=5 face=楷体_GB2312><FONT color=#000000 size=3 face=宋体>   </FONT></FONT></P></TD></TR></TBODY></TABLE></DIV>

II.〆雪灬颜° 发表于 2012-1-9 15:39:52

学习中，空白妞太给力了！

莫筱发表于 2012-1-9 16:18:27

{:eb511:}{:eb511:}空白妞又来刺激莪们了好给力啊~~

II.〆小杰° 发表于 2012-1-9 17:32:06

好漂亮的图收藏了哈哈

张洋洋哦 发表于 2012-1-9 17:45:45

打包全部打包等我有时间也来诱惑你们哼你们等着{:70_292:}

II.〆傲天° 发表于 2012-1-9 18:20:07

{:70_287:}有悾白在，我就是那块最给力的白板！

书香傲气 发表于 2012-1-9 18:49:26

空白姐姐你又辛苦了，嘿嘿嘿嘿

云晓月 发表于 2012-1-9 19:45:40

嗯，我来学习了，感觉总也学不完。

再见，夏日阳光 发表于 2012-2-3 11:34:20

边框也很不错呀。。。。

晓清发表于 2012-2-3 12:47:17

莫离。终陌离° 发表于 2012-2-3 11:34 static/image/common/back.gif
边框也很不错呀。。。。

边框额下面那个边框还可以

夏若发表于 2012-3-5 21:17:51

{:2_269:}我还在琢磨中

页: [1]

三毛钱's Archiver

在图片上添加文字定位跳跃代码 很有趣喔

在图片上添加文字定位跳跃代码很有趣喔