费家村----老费的三角梅花园

科学、民主、竞争是科技和社会进步的法宝

日志

关于我

fdycq

文章分类

图片、文字运动代码及效果

2009-02-26 12:56:18| 分类：代码/博客 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

图片、文字运动代码及效果

一、基本语法和属性设置：

1、基本语法：<marquee> ... </marquee>

2、属性设置代码意义：

速度： scrollamount=# #=数字越大越快

方式： behavior=# #=scroll：翻覆, slide：一次, alternate：来回循环

方向： direction=# #=left：向左, right：向右， down：向下， up：向上。

次数：loop=# #=数字若未指定则循环不止(infinite)

背景颜色：bgcolor=#FF0000 #=颜色代码

二、向右运动代码及效果

1、<marquee direction=right>文字左向右运动</marquee>

文字左向右运动！

2、<MARQUEE scrollAmount=2 scrollDelay=30 direction=right width="90%" height=100><IMG height=100 src="

图片地址" width=100 border=0><IMG height=100 src="图片地址" width=100 border=0></MARQUEE

效果：

图片、文字运动代码及效果 - fdycq - 费家村----老费的花园

3、移动的友情链接代码：向右运动点击图片，打开对方地址。

效果：（没有做链接对方地址）

三、向左运动代码及效果（一）

1、 <marquee direction=left>文字右向左运动</marquee>

文字右向左运动！

2、<MARQUEE style="FONT-SIZE: 35pt; FILTER: shadow(color =black); WIDTH: 100%; COLOR: #0000ff; LINE-HEIGHT: 150%; FONT-FAMILY: 華文彩云" scrollAmount=６><FONT color=#ff00ff><B>向左运动</B></FONT></MARQUEE>

向左运动

代码及效果（二)

图片、文字运动代码及效果 - fdycq - 费家村----老费的花园

四、左右来回运动代码

1、文字图片的左右来回运动代码和效果：

<MARQUEE scrollAmount=2 scrollDelay=60 behavior=alternate turespeed="true" border="0"><IMG

src="图片地址"><font color=#1E90FF size="6"><b> 左右来回运动><IMG

src="图片地址"></MARQUEE>

左右来回运动

2、图片的左右来回运动代码和效果：

图片、文字运动代码及效果 - fdycq - 费家村----老费的花园

上图地址为： http://img.blog.163.com/photo/jPILDC0iBrIxuJtoFdCFEQ==/4559331672759492112.jpg

3、连续多张图片的左右来回运动代码和效果：

<MARQUEE scrollAmount=2 scrollDelay=60 behavior=alternate turespeed="true" border="0"><IMG

src="图片地址"><IMG

src="图片地址 "></MARQUEE>

连续多张效果：

三角梅左右移动自定义模块代码 - fdycq - 费家村----老费的三角梅花园

五、上下滚动代码

1、向上：

<MARQUEE style="FONT-SIZE: 12px; WIDTH: 132px; COLOR: rgb(34,34,221); LINE-HEIGHT: 17px; HEIGHT: 125px" scrollAmount=1 scrollDelay=1 direction=up height=125>这里是文字<BR></MARQUEE>

效果

这里是滚动文字

连续图片滚动的代码：

效果：

2、向下：

<MARQUEE style="FONT-SIZE: 12px; WIDTH: 132px; COLOR: rgb(34,34,221); LINE-HEIGHT: 17px; HEIGHT: 125px" scrollAmount=1 scrollDelay=1 direction=down height=125>这里是文字<BR></MARQUEE>

六、有背景的图片文字连体运动代码：

<TBODY>

<TR>

<TD>

<MARQUEE scrollAmount=3 behavior=alternate width=750><IMG src="图片地址"><FONT face=华文行楷 color=#800080 size=30><B><FONT face=楷体_GB2312 color=#00ffff>要写的文字</FONT><IMG src="图片地址"></B></FONT></MARQUEE>

</MARQUEE></TD></TR></TBODY></TABLE>

效果

要写的文字

七、图片文字连体波浪运动代码：

实质：波浪运动是上下、左右运动的合成。代码是上下运动代码设置与左右运动代码设置的结合。

图片文字连体波浪运动效果：

文字

八、合成梦幻图片的代码：

效果：

来源：大海胸怀的如何合成梦幻图片【原创】

九、两边向内移动图片代码

效果：

图片、文字运动代码及效果 - fdycq - 费家村----老费的花园

十、多图重叠移动代码及效果图　

代码：<TABLE cellSpacing=0 cellPadding=0 width=600 align=center background=背景图片地址 border=0>

<TBODY>

<TR>

<TD>

效果：

十一、框内多图移动代码及效果

代码：

<TABLE style="BORDER-RIGHT:DARKRED 7px dashed;BORDER-TOP:DARKRED 7px dashed;BORDER-LEFT:DARKRED 7px dashed;BORDER-BOTTOM:DARKRED 7px dashed" cellSpacing=0 cellPadding=0 width=550 bgColor=#339933 border=0><TBODY><TR><TD><marquee behavior="scroll" direction=down width="177" height="220" scrollamount="3" onmouseout="this.start()"><img src="图片地址 "><img src="图片地址"><img src="图片地址 "><img src="图片地址"><img src="图片地址 "><img src="图片地址"><img src="图片地址"><img src="图片地址"><img src="图片地址"><img src="图片地址"></marquee><MARQUEE width=177 height=220 onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"><img src="图片地址 "><img src="图片地址 "><img src="图片地址"><img src="图片地址"><img src="图片地址 "><img src="图片地址"><img src="图片地址"><img src="图片地址"><img src="图片地址"><img

src="图片地址"><img src="图片地址"></MARQUEE><marquee behavior="scroll" direction=up width="177" height="220" scrollamount="3" onmouseout="this.start()"><img src="图片地址 "><img src="图片地址 "><img src="图片地址 "><img src="图片地址"><img src="图片地址"><img src="图片地址 "><img src="图片地址 "><img src="图片地址"><img src="图片地址 "><img src="图片地址"></marquee>

效果图

十二、其他

代码：<MARQUEE scrollAmount=1 behavior=alternate>
<TABLE style="WIDTH: 493px; HEIGHT: 389px" borderColor=#00fa9a height=389 width=493 align=center border=3>
<TBODY>
<TR>
<TD>
<CENTER>
<TABLE style="BACKGROUND-IMAGE: url(http://img.bimg.126.net/photo/oIlA6x8CMtbmT3-5DY_S2g==/4819133076263421153.jpg%20+$)%20+$)+)++); WIDTH: 460px; BORDER-BOTTOM-STYLE: outset; outset: ; ridge: " cellSpacing=4 FONT>
<TBODY>
<TR>
<TD>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P></TD></TR></TBODY></TABLE></CENTER></TD></TR></TBODY></TABLE></MARQUEE></P>

代码：<DIV>
<TABLE style="WIDTH: 654px; HEIGHT: 446px">
<TBODY>
<TR>
<TD></TD>
<TD>
<DIV>,
<MARQUEE scrollAmount=3 scrollDelay=3 direction=right behavior=alternate valign="middle">
<TABLE style="BACKGROUND-IMAGE: url(http://img.bimg.126.net/photo/fGVGP8sWuq4Nm8VDshV8eQ==/4522458450811560916.jpg+)+%20++$); WIDTH: 920px; HEIGHT: 380px; BORDER-BOTTOM-STYLE: outset; outset: ; ridge: " cellSpacing=4 align=center FONT>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#8b0000 align=center border=0>
<TBODY></TBODY></TABLE></TD></TR></TBODY></TABLE>
<P></P></MARQUEE></DIV></TD></TR></TBODY></TABLE></DIV></CENTER></DIV>

,

代码：

<DIV align=center><FONT face=楷体_GB2312><FONT size=4><FONT color=#ffffff></FONT></FONT></FONT>
<MARQUEE style="WIDTH: 435px; HEIGHT: 84px" scrollAmount=2 direction=up height=84><FONT color=#00ff00 face=隶书 size=5>
<DIV align=center><FONT face=华文行楷 color=ff0000 size=6>欢迎光大海胸怀博客乐园</FONT></DIV>
<DIV align=center> </DIV>
<DIV align=center>是网络将我们联系在一起</DIV>
<DIV align=center>是缘让我们相识</DIV>
<DIV align=center>让我们在这博客的乐园中</DIV>
<DIV align=center>携手谱写快乐篇章儿</DIV>
<DIV align=center> </DIV></FONT></MARQUEE>
</TR></TBODY></TABLE>

效果：

,

欢迎光大海胸怀博客乐园

是网络将我们联系在一起

是缘让我们相识

让我们在这博客的乐园中

携手谱写快乐篇章儿

评论这张

转发至微博

阅读(1256)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_085074084084087066083083081095085095087069080095082064',
              blogTitle:'图片、文字运动代码及效果',
              blogAbstract:'<strong\><font color=\"#0000ff\"  size=\"5\"  face=\"楷体_GB2312\"  \>   <p style=\"TEXT-INDENT: 2em;\"  align=\"center\"  \>图片、文字运动代码及效果</p\></font\></strong\>  <p align=\"left\"  \><strong\><font color=\"#0000ff\"  size=\"3\"  face=\"楷体_GB2312\"  \>一、基本语法和属性设置：</font\></strong\></p\>  <p align=\"left\"  \><font face=\"宋体\"  \><font size=\"3\"  \><font color=\"#000000\"  \>1、基本语法：<marquee> ... </marquee></font\></font\></font\></p\>  <p align=\"left\"  \><font face=\"楷体_GB2312\"  \><font color=\"#0000ff\"  \><font face=\"宋体\"  \><font color=\"#000000\"  size=\"3\"  \>2、属性设置代码意义：</font\></font\></font\></font\></p\>  <p style=\"TEXT-INDENT: 2em;\"  \><font color=\"#000000\"  size=\"3\"  face=\"宋体\"  \></font\></p\><font face=\"宋体\"  \><font color=\"#000000\"  size=\"3\"  \>  <p style=\"TEXT-INDENT: 2em;\"  \><font color=\"#000000\"  size=\"3\"  face=\"宋体\"  \>速度： scrollamount=#    #=数字  越大越快 </font\></p\>  </font\></font\>',
              blogTag:'',
              blogUrl:'blog/static/19664943200912605618388',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1317424048685,
              publishTime:1235624178388,
              permalink:'blog/static/19664943200912605618388',
              commentCount:0,
              mainCommentCount:0,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/19664943200912605618388">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

费家村----老费的三角梅花园

导航

日志

图片、文字运动代码及效果

历史上的今天

最近读者

热度

评论

页脚