HTML文字代码——移动文字（marquee 标签属性的结合变化）

日志

关于我

启野

B型天秤座

文章分类

2011-03-19 10:08:55| 分类： HTML专区 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

HTML

移动文字（marquee 标签属性的结合变化）

移动文字（marquee 标签属性的结合变化）博文简介

运用多个marquee 标签并结合marquee 标签的属性特点可以结合变化出多种特效，让我们的网页更加丰富多彩。
博文未提到的属性问题和基本移动代码请点击：HTML文字代码——移动文字（marquee 标签属性详解）

1、移动输入：
代码	<marquee behavior="alternate"> <marquee width="150" direction=right> 需要移动的文字 </marquee> </marquee>
示例	需要移动的文字
说明	<marquee behavior="alternate">需要移动的文字</marquee> 来回移动（滚动文字在页面中的宽度值自适应） <marquee width="150" direction=right>需要移动的文字</marquee> 向右移动（滚动文字在页面中的宽度值小，能够放下文本，调节这个宽度值最重要）来回移动包含向右移动。
2、从左上向右下移动：
代码	<marquee direction=right> <marquee width=216 direction=down> 需要移动的文字 </marquee> </marquee>
示例	需要移动的文字
说明	<marquee direction=right>需要移动的文字</marquee> 向右移动（滚动文字在页面中的宽度值自适应） <marquee width=216 direction=down>需要移动的文字</marquee> 向下移动（滚动文字在页面中的宽度值小，能够放下文本，调节这个宽度值最重要）向右移动包含向下移动。
3、从右上向左下移动：
代码	<marquee direction=left> <marquee width=216 direction=down> 需要移动的文字 </marquee> </marquee>
示例	需要移动的文字
说明	<marquee direction=left>需要移动的文字</marquee> 向左移动（滚动文字在页面中的宽度值自适应） <marquee width=216 direction=down>需要移动的文字</marquee> 向下移动（滚动文字在页面中的宽度值小，能够放下文本，调节这个宽度值最重要）向左移动包含向下移动。
4、从左下向右上移动：
代码	<marquee direction=right> <marquee width=216 direction=up> 需要移动的文字 </marquee> </marquee>
示例	需要移动的文字
说明	<marquee direction=right>需要移动的文字</marquee> 向右移动（滚动文字在页面中的宽度值自适应） <marquee width=216 direction=up>需要移动的文字</marquee> 向上移动（滚动文字在页面中的宽度值小，能够放下文本，调节这个宽度值最重要）向右移动包含向上移动。
5、从右下向左上移动：
代码	<marquee direction=left> <marquee width=216 direction=up> 需要移动的文字 </marquee> </marquee>
示例	需要移动的文字
说明	<marquee direction=left>需要移动的文字</marquee> 向左移动（滚动文字在页面中的宽度值自适应） <marquee width=216 direction=up>需要移动的文字</marquee> 向上移动（滚动文字在页面中的宽度值小，能够放下文本，调节这个宽度值最重要）向左移动包含向上移动。
6、水平相反移动：
代码	<MARQUEE width=216>需要移动的文字</MARQUEE> <MARQUEE direction=right width=216>字文的动移要需</MARQUEE>
示例	需要移动的文字字文的动移要需
说明	<MARQUEE width=216>需要移动的文字</MARQUEE> 向左移动（采用默认向左移动值，去掉了direction=left） <MARQUEE direction=right width=216>字文的动移要需</MARQUEE> 向右移动（与向左移动的文字相反，宽度值相同）向左移动并列向右移动，两个移动值的宽度之和小于滚动文字在页面中的总宽度值。两组移动代码不要分别设置居中、靠左或靠右，直接设置一组才能正常显示。代码示例如下： <P align=center>移动代码</P>或者用<DIV align=center>移动代码</DIV>
7、左右两边向中间移动：
代码	<marquee style="width:216px;" direction=right>字文的动移要需</marquee> <marquee style="width:216px;" direction=left>需要移动的文字</marquee>
示例	字文的动移要需需要移动的文字
说明	方法同上例，只不过向左移动与向右移动换了前后顺序的组织构成。
8、左右两边向中间来回移动：
代码	<marquee behavior=alternate direction=left scrollAmount=3 width="216">需要移动的文字</marquee> <marquee behavior=alternate direction=right scrollAmount=3 width="216">需要移动的文字</marquee>
示例	需要移动的文字需要移动的文字
说明	向左移动并列向右移动，前后两组代码的前后顺序没关系，只改变为来回移动代码。两组移动值的宽度之和小于滚动文字在页面中的总宽度值。两组移动代码不要分别设置居中、靠左或靠右，直接设置一组才能正常显示。代码示例如下： <P align=center>移动代码</P>或者用<DIV align=center>移动代码</DIV>
9、从上下向中间移动：
代码	<marquee direction=down scrollAmount=2 height=50>需要移动的文字</marquee> <marquee direction=up scrollAmount=2 height=50>需要移动的文字</marquee>
示例	需要移动的文字需要移动的文字
说明	向上移动与向下移动并列，有前后顺序关系。两个移动值的高度相同。两组移动代码分别设置居中、靠左或靠右，才能正常显示。代码示例如下： <P align=center>移动代码</P><P align=center>移动代码</P> 或者用<DIV align=center>移动代码</DIV><DIV align=center>移动代码</DIV>
10、从中间向上下移动：
代码	<marquee direction=up scrollAmount=2 height=50>需要移动的文字</marquee> <marquee direction=down scrollAmount=2 height=50>需要移动的文字</marquee>
示例	需要移动的文字需要移动的文字
说明	方法同上例，互换前后顺序。两组移动代码分别设置居中、靠左或靠右，才能正常显示。代码示例如下： <P align=center>移动代码</P><P align=center>移动代码</P> 或者用<DIV align=center>移动代码</DIV><DIV align=center>移动代码</DIV>
11、上下向中间来回移动：
代码	<marquee behavior=alternate direction=down scrollAmount=2 height=50>需要移动的文字</marquee> <marquee behavior=alternate direction=up scrollAmount=2 height=50>需要移动的文字</marquee>
示例	需要移动的文字需要移动的文字
说明	向上移动并列向下移动，前后两组代码的前后顺序没关系，只改变为来回移动代码。两组移动值的宽度之和小于滚动文字在页面中的总宽度值。两组移动代码分别设置居中、靠左或靠右，才能正常显示。代码示例如下： <P align=center>移动代码</P><P align=center>移动代码</P> 或者用<DIV align=center>移动代码</DIV><DIV align=center>移动代码</DIV>
12、上下交替移动：
代码	<MARQUEE direction=up behavior=alternate width=45 height=160>需</MARQUEE> <MARQUEE direction=up behavior=alternate width=45>要</MARQUEE> <MARQUEE direction=up behavior=alternate width=45 height=160>移</MARQUEE> <MARQUEE direction=up behavior=alternate width=45>动</MARQUEE> <MARQUEE direction=up behavior=alternate width=45 height=160>的</MARQUEE> <MARQUEE direction=up behavior=alternate width=45>文</MARQUEE> <MARQUEE direction=up behavior=alternate width=45 height=160>字</MARQUEE>
示例	需要移动的文字
说明	多组向上来回移动代码的组合，滚动文字在页面中的宽度值相同。滚动文字在页面中的高度值height=160 <MARQUEE direction=up behavior=alternate width=45 height=160>需</MARQUEE> 滚动文字在页面中的高度值自适应 <MARQUEE direction=up behavior=alternate width=45>要</MARQUEE> 这两组代码交替组合。多组移动代码不要分别设置居中、靠左或靠右，直接设置一组才能正常显示。代码示例如下： <P align=center>移动代码</P>或者用<DIV align=center>移动代码</DIV>
13、移动后消失：
代码	<marquee style="width: 220px; height: 120px" scrollAmount=5 direction=up> <marquee direction=up behavior=alternate width=30 height=100>需</marquee> <marquee direction=up behavior=alternate width=30 height=110>移</marquee> <marquee direction=up behavior=alternate width=30 height=100>要</marquee> <marquee direction=up behavior=alternate width=30 height=110>动</marquee> <marquee direction=up behavior=alternate width=30 height=100>的</marquee> <marquee direction=up behavior=alternate width=30 height=110>字</marquee> <marquee direction=up behavior=alternate width=30 height=100>文</marquee> </MARQUEE>
示例	需移要动的字文
说明	设置一组包含其他各组向上来回移动的代码， <marquee style="width: 220px; height: 120px" scrollAmount=5 direction=up></MARQUEE> 移动文字页面的宽度大于其他向上来回移动的宽度之和，移动文字页面的高度大于其他向上来回移动的高度。多组向上来回移动代码的组合，滚动文字在页面中的宽度值相同，高度值不同。。多组移动代码不要分别设置居中、靠左或靠右，直接设置一组才能正常显示。代码示例如下： <P align=center>移动代码</P>或者用<DIV align=center>移动代码</DIV>
14、波浪式移动：
代码	<MARQUEE scrollAmount=5 direction=up behavior=alternate> <MARQUEE scrollAmount=2>需要移动的文字</MARQUEE> </MARQUEE>
示例	需要移动的文字
说明	向上来回移动 <MARQUEE scrollAmount=5 direction=up behavior=alternate></MARQUEE> 默认向左移动 <MARQUEE scrollAmount=2>需要移动的文字</MARQUEE> 向上来回移动包含默认向左移动。移动速度可以调节为相同或者不同。向上来回移动包含默认向左移动。移动速度可以调节为相同或者不同。两组移动代码不要分别设置居中、靠左或靠右，直接设置一组才能正常显示。代码示例如下： <P align=center>移动代码</P>或者用<DIV align=center>移动代码</DIV>
15、往复波浪式移动：
代码	<marquee width=288 scrollAmount=5 direction=up behavior=alternate> <marquee scrollAmount=3 behavior=alternate width=288>需要移动的文字</marquee> </marquee>
示例	需要移动的文字
说明	向上来回移动 <MARQUEE scrollAmount=5 direction=up behavior=alternate></MARQUEE> 来回移动 <marquee scrollAmount=3 behavior=alternate width=288>需要移动的文字</marquee> 向上来回移动包含来回移动。移动速度可以调节为相同或者不同。两组移动代码不要分别设置居中、靠左或靠右，直接设置一组才能正常显示。代码示例如下： <P align=center>移动代码</P>或者用<DIV align=center>移动代码</DIV>
16、交替往复波浪式移动：
代码	<marquee width=436 scrollAmount=2 direction=right behavior=alternate> <marquee direction=up behavior=alternate width=40 height=150>需</marquee> <marquee direction=up behavior=alternate width=40 height=120>的</marquee> <marquee direction=up behavior=alternate width=40 height=150>要</marquee> <marquee direction=up behavior=alternate width=40 height=120>文</marquee> <marquee direction=up behavior=alternate width=40 height=150>移</marquee> <marquee direction=up behavior=alternate width=40 height=120>字</marquee> <marquee direction=up behavior=alternate width=40 height=150>动</marquee> </marquee>
示例	需的要文移字动
说明	设置一组包含其他各组向右来回移动的代码， <marquee width=436 scrollAmount=2 direction=right behavior=alternate></marquee> 移动文字页面的宽度大于其他向上来回移动的宽度之和。多组向上来回移动 <marquee direction=up behavior=alternate width=40 height=150>需</marquee> 多组向上来回移动代码的组合，滚动文字在页面中的宽度值相同，高度值不同。根据需要调节字的位置。向右来回移动包含其他多组移动。多组移动代码不要分别设置居中、靠左或靠右，直接设置一组才能正常显示。代码示例如下： <P align=center>移动代码</P>或者用<DIV align=center>移动代码</DIV>
17、文字穿梭移动：
代码	<marquee direction=right scrollAmount=2 width=30 height=20>文    文</marquee>      <marquee direction=right scrollAmount=2 width=30 height=20>字    字</marquee>      <marquee direction=right scrollAmount=2 width=30 height=20>穿    穿</marquee>      <marquee direction=right scrollAmount=2 width=30 height=20>梭    梭</marquee>
示例	文文字字穿穿梭梭
说明	默认向左移动代码或者向右移动代码多组组合，设置等同值的宽度和高度。添加重复字，在重复字中和两组代码之间添加四个空格符&nbsp，让它们之间的距离相同。多组移动代码不要分别设置居中、靠左或靠右，直接设置一组才能正常显示。代码示例如下： <P align=center>移动代码</P>或者用<DIV align=center>移动代码</DIV>
18、文字竖排渐出移动：
代码	<DIV align=center> <MARQUEE scrollAmount=1 scrollDelay=100 behavior=slide loop=1 width=290 height=180> <MARQUEE style="LINE-HEIGHT: 120%; WRITING-MODE: tb-rl" scrollAmount=1 scrollDelay=100 direction=up width=290 height=180> <P align=center>需要移动的字文<BR>.<BR>.<BR>.<BR>需<BR>要<BR>移<BR>动<BR>的<BR>文<BR>字<BR>.<BR>.<BR>.</P></MARQUEE></MARQUEE></DIV>
示例	需要移动的字文 . . . 需要移动的文字 . . .
说明	只滚动一次默认向左移动代码 <MARQUEE scrollAmount=1 scrollDelay=100 behavior=slide loop=1 width=290 height=180></MARQUEE> 文字竖排向上代码 <MARQUEE style="LINE-HEIGHT: 120%; WRITING-MODE: tb-rl" scrollAmount=1 scrollDelay=100 direction=up width=290 height=180> <P align=center>需要移动的字文<BR>.<BR>.<BR>.<BR>需<BR>要<BR>移<BR>动<BR>的<BR>文<BR>字<BR>.<BR>.<BR>.</P></MARQUEE> 只滚动一次默认向左移动代码包含文字竖排向上代码换行代码<BR> 整体滚动文本居中属性 <DIV align=center></DIV> 文本水平居中 <P align=center></P> 文字竖排代码属性 style="layout-flow:vertical-ideographic" 或者style="LINE-HEIGHT: 120%; WRITING-MODE: tb-rl" 这个代码中唯一的亮点就是Writing-Mode这个参数，其后的 tb 代表文字排列从上到下，rl 代表从右到左。蝶恋花 ·柳永伫倚危楼风细细望极春愁，黯黯生天际。草色烟光残照里，无言谁会凭阑意。拟把疏狂图一醉，对酒当歌，强乐还无味。衣带渐宽终不悔，为伊消得人憔悴。

欢迎光临启野博客！

欢迎光临启野博客

评论这张

转发至微博

阅读(4217)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_094069093084088064080095094095083084084067083083082065',
              blogTitle:'HTML文字代码——移动文字（marquee 标签属性的结合变化）',
              blogAbstract:'   <TABLE border=\"8\" cellSpacing=\"3\" borderColor=\"#003333\" cellPadding=\"0\" width=\"100%\"  align=\"center\" height=\"211\" \>  <TBODY\>  <TR\>  <TD height=\"184\" vAlign=\"top\" \>  <TABLE border=\"1\" cellSpacing=\"2\" borderColor=\"#003333\" cellPadding=\"0\" width=\"100%\"  align=\"center\" height=\"211\" \>  <TBODY\>  <TR\>  <TD height=\"184\" vAlign=\"top\" \>  <TABLE border=\"0\" width=\"100%\"  \>  <TBODY\>  <TR\>  <TD height=\"290\" background=\"http://img31.bimg.126.net/photo/l16DweXT0cnHH73Rk-QaNQ==/5711971702390492305.jpg\" width=\"500\" \>  <DIV align=\"center\" \>    <FIELDSET style=\"WIDTH: 349px; HEIGHT: 89px;\"  \>  <P align=\"center\" \><LEGEND\><FONT color=\"#ff0000\" size=\"3\" \><STRONG\>HTML</STRONG\></FONT\></LEGEND\><FONT color=\"#ffff00\" size=\"3\" \><FONT color=\"#ffff00\" size=\"3\" \></FONT\></FONT\></P\>  <P align=\"center\" \></P\></FIELDSET\></DIV\></TD\></TR\></TABLE\></TD\></TR\></TABLE\></TD\></TR\></TABLE\>',
              blogTag:'html',
              blogUrl:'blog/static/7250754220112111249388',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1329408758543,
              publishTime:1300500535173,
              permalink:'blog/static/7250754220112111249388',
              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:'B型天秤座',
              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/7250754220112111249388">${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 - 订阅此博客

启野的博客

导航

日志

HTML文字代码——移动文字（marquee 标签属性的结合变化）

历史上的今天

最近读者

热度

评论

页脚