欢迎您!启步学代码。

(游子学习笔记。 供初学HTML代码的朋友参考)



趣味的移动标签

  用html代码编辑音画贴,不是很难的知识.因为html不是程序语言,而是标签语言,好像是用具名称, 知道它的作用,就能做出什么东西.学会使用十多条htm标签,就能制作出很多精采的音画贴.比如 文字标签或贴图标签,再加上移动标签marquee,就能编成许多文字或图片等趣味的动态效果.
  移动标签名称:marquee
  移动标签是成对标签:<marquee>移动内容</b></font></marquee>
  只用移动标签,没有设置其他属性内容时,默然从右向左移动,比如:

<marquee><font style=font:20pt color=#0000ff><b>只用移动标签,没有设置其他属性内容时,默然从右向左移动.</b></font></marquee>
显示效果:

只用移动标签,没有设置其他属性内容时,默然从右向左移动.



  移动标签的语句有标签名称,属性内容和属值.属性内容(指令)有方向、速度、方式、循环、延时等.常用的有方向和速度两个内容.代码模式:


<marquee scrollamount=#direction=# >图片,文字或网页</marquee>

  说明:
  ◆这条标签有一个移动名称,两个属性内容和属值.
  ◆黑色字体marquee是移动标签名称.
  ◆红色字体scrollamount=#是第一属性内容名称及属值:移动速度和参数.
  ◆蓝色字体direction=# 是第二属性内容名称及属值:移动方向和参数.


文字从左向右移动的代码:

<MARQUEE scrollAmount=3 direction=right>
<font style=font:20pt color=#0000ff><b>
向右移动语句direction=right
</b></font></marquee>


显示效果:

向右移动语句direction=right

 移动标签的语句说明:
  ◆marquee 标签名称.
  ◆scrollamount=# 属性内容速度及属值.属值:#=1 最慢 #=10 较快,参值大速度快.
  ◆direction=# 属性内容方向及属值.
  ▽移动方向属值:left向左移, right向右移,up向上移,down向下移,alternate来回走.



移动速度快慢代码:


移动速度实例代码:



  ◆移动速度快慢的语句scrollamount= 参数大移动快.

显示效果:

我的速度太慢.scrollamount=1 我的速度正常.scrollamount=3 我的速度较快.scrollamount=10
  



移动方向的练习

        

(一)文字从右向左移动.

<marquee scrollamount=2 direction=left>
<font style=font:15pt color=#0000ff><b>
七律 长征(1935.10)红军不怕远征难,万水千山只等闲。五岭逶迤腾细浪,乌蒙磅礴走泥丸。金沙水拍云崖暖,大渡桥横铁索寒。更喜岷山千里雪,三军过后尽开颜。
</b></font> </marquee>

显示结果:

七律 长征(1935.10)红军不怕远征难,万水千山只等闲。五岭逶迤腾细浪,乌蒙磅礴走泥丸。金沙水拍云崖暖,大渡桥横铁索寒。更喜岷山千里雪,三军过后尽开颜。



        

(二)图片从左向右移动的代码.

<marquee scrollamount=5 direction=right>
<img src=http://hunan.voc.com.cn/img/2003-12/04/xin_e926d9f8267b11d8bfe60050ba147130.gif>
</marquee>

  ◆关键语句:direction=right 从左向右移动指令.

显示结果:






      

(三)文字从下向上移动的代码.

<b> <marquee scrollamount=1 direction=up >
<pre>
       七律 长征(1935.10)
    红军不怕远征难,万水千山只等闲。
    五岭逶迤腾细浪,乌蒙磅礴走泥丸。
    金沙水拍云崖暖,大渡桥横铁索寒。
    更喜岷山千里雪,三军过后尽开颜。
</pre></marquee>


  ◆关键语句:direction=up 从下向上移动指令.
  ◆<pre>文字内容</pre>这是文字依原来方式显示的首尾标签.

显示结果:

       七律 长征(1935.10)
        
        红军不怕远征难,万水千山只等闲。
    五岭逶迤腾细浪,乌蒙磅礴走泥丸。
    金沙水拍云崖暖,大渡桥横铁索寒。
    更喜岷山千里雪,三军过后尽开颜。



    

(四)图片从上向下移动的代码.

<marquee scrollamount=5 direction=down > <CENTER> <INPUT src="http://7wind.net/wysc/qita/image/297.gif" type=image width=70> </CENTER></marquee>

  ◆关键语句:direction=down 从上向下移动指令.


显示结果:








  

(五)图片左右来回走的代码.

<marquee scrollamount=8 behavior=alternate >
<CENTER>
<INPUT src="http://7wind.net/wysc/qita/image/297.gif" type=image width=70>
</CENTER></marquee>

  ◆关键语句:behavior=alternate 左右来回走移动指令.


显示结果:




(六)图片斜着移动的练习

  用两条移动标签,一个控制上下方向.另一个控制左右方向.比如要从左下角向右上角斜着移动, 第一条标签的移动向上up,第二条标签的移动向右right.图片四种斜走的代码模式和显示效果如下:



⑴图片从左下角向右上角斜着移动的代码:



  ◆第一条移动标签向上:direction="up".
  ◆第二条移动标签向右:direction="right"



显示效果:





⑵图片从右下角向左上角斜着移动的代码:



  ◆第一条移动标签向上:direction="up".
  ◆第二条移动标签向左:direction="left"



显示效果:




⑶图片从右上角向左下角斜着移动的代码:



  ◆第一条移动标签向上:direction="down".
  ◆第二条移动标签向左:direction="left"



显示效果:





⑷图片从左上角向右下角斜着移动的代码:



  ◆第一条移动标签向上:direction="down".
  ◆第二条移动标签向左:direction="right"



显示效果:





⑸图片从右下角和左下角向左上角和右上角斜着移动合并的代码:



  ◆设置一张宽800高400的表格,分为二个单元格,再分别插入移动图片的代码.

显示效果:







   ⑹ 图片走四方的代码.



显示结果:


走四方



  ⑺文字在图片上向上移动的代码.



显示结果:

   《梅花落》
隆冬十二月,寒风西北吹。
独有梅花落,飘荡不依枝。
留恋逐霜彩,漫步下冰斯。
何当与春日,共映芙蓉词。





  ⑻多张图片移动的代码.



  ◆图片之间设一个空格,图片就不会粘并.

显示结果:

             




  (七)整张页面移动的代码.



  ◆整张页面移动的方法,在贴子代码文本最前行和最后行,设置移动标签即可.
  ◆页面左右移动的代码:
最前行加移动首标签<MARQUEE scrollAmount=3 behavior=alternate width="100%">
最后行加移动尾标签</MARQUEE>
  ◆如果要改变移动方向,修改移动方向属值direction=#.



显示结果:

 















  ⑽图片多行多列移动代码.



显示结果:





  ⑾文字波浪形来回移动的代码.



显示结果:

 
2
0
0
8















击点打开html代码浏览器

  原创编辑:游子
2005年10月试编 2006年06月改编
2007年04月改编 2008年11月改编

(为了让更多网友学用html代码制作音画贴,本贴 欢迎转载.但是.我用了很多时间和精力编写这些资料的,转载时请注意网络上的荣辱公德不要把原创编辑游子的名字改掉。谢谢!)