注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

启野的博客

淡淡的雾,淡淡的雨,淡淡的云彩悠悠的游。

 
 
 

日志

 
 

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

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>文&nbsp;&nbsp;&nbsp;&nbsp;文</marquee>
&nbsp;&nbsp;&nbsp;&nbsp;
<marquee direction=right scrollAmount=2 width=30 height=20>字&nbsp;&nbsp;&nbsp;&nbsp;字</marquee>
&nbsp;&nbsp;&nbsp;&nbsp;
<marquee direction=right scrollAmount=2 width=30 height=20>穿&nbsp;&nbsp;&nbsp;&nbsp;穿</marquee>
&nbsp;&nbsp;&nbsp;&nbsp;
<marquee direction=right scrollAmount=2 width=30 height=20>梭&nbsp;&nbsp;&nbsp;&nbsp;梭</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 代表从右到左。

 

蝶恋花 ·柳永
   
伫倚危楼风细细
望极春愁,
黯黯生天际。
草色烟光残照里,
无言谁会凭阑意。
   
拟把疏狂图一醉,
对酒当歌,
强乐还无味。
衣带渐宽终不悔,
为伊消得人憔悴。
欢迎光临启野博客!
  
  评论这张
 
阅读(2953)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017