zoukankan      html  css  js  c++  java
  • [HTML代码]会移动的文字(Marquee)

    [HTML代码]会移动的文字(Marquee)

    Marquee标记用于在可用浏览区域中滚动文本。这个标记只适用于IE3以后的版的浏览器。 
        格式: 
        <MARQUEE ALIGN="…" 
        BEHAVIOR="…" 
        BGCOLOR="…" 
        DIRECTION="…" 
        HEIGHT="…" 
        WIDTH="…" 
        HSPACE="…" 
        VSPACE="…" 
        LOOP="…" 
        SCROLLAMOUNT="…" 
        SCROLLDELAY="…" 
    ONMOUSEOUT=this.start()
    ONMOUSEOVER=this.stop()
        >… 
        </MARQUEE> 
       
        属性: 
        ALIGN:用于按设定的值对齐滚动的文本。ALIGN可以设定的值有:LEFT,CENTER,RIGHT,TOP,BOTTOM。此属性不是必须使用的。 
        例: 
        <MARQUEE ALIGN="TOP">这段滚动文字设定为上对齐</MARQUEE> 
       
       
        BEHAVIOR:可以在页面上一旦出现文本时让浏览器按照设定的方法来处理文本。如果设定的方法是SLIDE,那么文本就移动到文档上,并停留在页边距上。如果设定为ALTERNATE,则文本从一边移动到另一边。如果设定为SCROLL,文本将在页面上反复滚动。本属性不是必须使用的。可以设定的值有:SILIDE,ALTERNATE,SCROLL。 
        例: 
        <MARQUEE BEHAVIOR="ALTERNATE">文字从一边移动到另一边</MARQUEE> 
       
       
        BGCOLOR:用于设定字幕的背景颜色。背景颜色可用RGB、16进制值的格式或颜色名称来设定。 
        例: 
        <MARQUEE BGCOLOR="RED">用颜色名称设定滚动文字背景颜色为红色</MARQUEE> 
        <MARQUEE BGCOLOR="#FF0000">用16进制值设定滚动文字背景颜色为红色</MARQUEE> 
        <MARQUEE BGCOLOR=RGB(100%,0%,0%)>用RGB设定滚动文字背景颜色为红色</MARQUEE> 
          
        DIRECTION:用于设定文本滚动的方向,可以设定的值有:LEFT,RIGHT。此属性不是必须使用的。 
        例: 
        <MARQUEE DIRECTION="LEFT">文字向左边滚动</MARQUEE> 
        <MARQUEE DIRECTION="RIGHT">文字向右边滚动</MARQUEE> 
       
    HEIGHT:用于设定滚动字幕的高度,高度可用像素或可视页面的百分比来表示。此属性不是必须使用的。 
        例: 
        <MARQUEE HEIGHT="10%">滚动字幕的高度是可视页面的10%</MARQUEE> 
        <MARQUEE HEIGHT="12">滚动字幕的高度是12像素</MARQUEE> 
          
        WIDTH:用于设定字幕的宽度,宽度可用像素或可视页面的百分比来表示。此属性不是必须使用的。 
        例: 
        <MARQUEE WIDTH="90%">滚动字幕的宽度是可视页面的90%</MARQUEE> 
        <MARQUEE WIDTH="200">滚动字幕的宽度是200像素</MARQUEE> 
          
        HSPACE:用于设定滚动字幕左右的空白空间,空白空间用像素表示。此属性不是必须使用的。 
        例: 
        <MARQUEE HSPACE="15">滚动字幕左右空白空间为15个像素</MARQUEE> 
         
        VSPACE:用于设定滚动字幕上下的空白空间,空白空间用像素表示。此属性不是必须使用的。 
        例: 
        <MARQUEE VSPACE="2">滚动字幕上下的空白空间为2个像素</MARQUEE> 
         
        LOOP:用于设定滚动字幕的滚动次数。当LOOP的值为"INFINITE"或是"-1"时,则文字会无限制地滚动。此属性不是必须使用的。 
        例: 
        <MARQUEE LOOP="-1">文字滚动无数次</MARQUEE> 
        <MARQUEE LOOP="5">文字滚动5次</MARQUEE> 
       
        SCROLLAMOUNT:用于设定每个连续滚动文本后面的间隔,该间隔用像素表示。此属性不是必须使用的。 
        例: 
        <MARQUEE SCROLLAMOUNT="10">此文本后面的间隔为10个像素</MARQUEE> 
          
        SCROLLDELAY:用于设定两次滚动操作之间的间隔时间,该时间以毫秒为单位。此属性不是必须使用的。 
        例: 
        <MARQUEE SCROLLDELAY="5">此文本两次滚动之间的间隔时间为5毫秒</MARQUEE>

    ONMOUSEOUT=this.start() :用来设置鼠标移出该区域时继续滚动
    ONMOUSEOVER=this.stop():用来设置鼠标移入该区域时停止滚动



    -------------------------------------------------------------


    <TABLE height=393 cellSpacing=0 cellPadding=0 width=524 align=center bgColor=#d1f6db border=0><FONT size=4><FONT color=#990033></FONT></FONT>
    <TBODY>
    <TR><FONT size=4><FONT color=#990033></FONT></FONT>
    <TD style="BORDER-RIGHT: 2px solid; PADDING-RIGHT: 1px; BORDER-TOP: 2px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: 2px solid; LINE-HEIGHT: 20px; PADDING-TOP: 1px; BORDER-BOTTOM: 2px solid" borderColor=#99ccff bgColor=#000000 colSpan=2 height=393>
    <P style="MARGIN-TOP: -5px; MARGIN-BOTTOM: -5px; LINE-HEIGHT: 100%">
    <MARQUEE scrollDelay=100 direction=up height=393><IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756252.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756538.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756304.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756318.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756503.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756827.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756521.jpg"></MARQUEE></P><PRE style="MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px; LINE-HEIGHT: 100%"></FONT></PRE></TD></TR></TBODY></TABLE>


    ------------------------------------------------------------


    基本语法
    <marquee> ... </marquee>


    文字移动属性的设置

    方向

    <direction=#> #=left, right <marquee direction=left>从右向左移!</marquee>
    方式

    <bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走!</marquee>
    <marquee behavior=slide>只走一次就歇了!</marquee>
    <marquee behavior=alternate>来回走</marquee>


    循环

    <loop=#> #=次数;若未指定则循环不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走

    3 趟</marquee>

    <marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee>
    <marquee loop=3 width=50% behavior=alternate>只走 3 趟!</marquee>


    速度

    <scrollamount=#> <marquee scrollamount=20>啦啦啦,我走得好快哟!</marquee>


    延时

    <scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦,我走一步,停一停!

    </marquee>


    外观(Layout)设置

    对齐方式(Align)

    <align=#> #=top, middle, bottom <font size=6>
    <marquee align=# width=400>啦啦啦,我会移动耶!</marquee>
    </font>

    底色

    <bgcolor=#> #=rrggbb 16 进制数码,或者是下列预定义色彩:
    Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
    Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>颜色!</marquee>


    面积

    <height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面积!</marquee>
     

    空白

    (Margins)<hspace=# vspace=#>
    <marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=center>面积!</marquee>

    <marquee direction=up>我在向上走!</marquee>
    <marquee direction=down>我又下向走了</marquee>

    补充一个无缝连接的循环滚动


    <html>
    <head>
    </head>
    <body>
    <TD WIDTH=390 HEIGHT=99><MARQUEE  scrollAmount=4 scrollDelay=0 loop=1 width=390 height=99>
                <SCRIPT language=JavaScript>
       for(t=1;t<=1000;t++)
       document.write("11111111111112222222222222222233333333333333")
      
                
    </SCRIPT>
                 </MARQUEE></TD>
    </body>
    </html>

    另一种实现无缝连接循环滚动得方法

    <div style=overflow:hidden;height:100px 100px>
    <div href="#" target="_blank"><img src="http://www.5dmedia.com/bbs/icon/nudeangel.gif"

    width="80" height="80"

    border="0"></a>

    <a href="#" target="_blank"><img src="http://www.5dmedia.com/bbs/icon/nudeangel.gif"

    width="80" height="80"

    border="0"></a>

    <a href="#" target="_blank"><img src="http://www.5dmedia.com/bbs/icon/nudeangel.gif"

    width="80" height="80"

    border="0"></a>

    <a href="#" target="_blank"><img src="http://www.5dmedia.com/bbs/icon/nudeangel.gif"

    width="80" height="80"

    border="0"></a>

    <a href="#" target="_blank">nudeangel_2</a>

    <a href="#" target="_blank">nudeangel_3</a>

    <a href="#" target="_blank">nudeangel_4</a>

    <a href="#" target="_blank">nudeangel_5</a>

    <a href="#" target="_blank">inudeangel_6</a>

    <a href="#" target="_blank">nudeangel_7</a>

    </div>
    <div t=demo.scrollTop
    demo2.innerHTML=demo1.innerHTML
    function nudeangelMarquee(){
    if(demo2.offsetTop-demo.scrollTop<=0)
    demo.scrollTop-=demo1.offsetHeight
    else
    demo.scrollTop++
    }
    var repeat=setInterval(nudeangelMarquee,50);
    demo.onmouseover=function() {clearInterval(repeat);}
    demo.onmouseout=function() {repeat=setInterval(nudeangelMarquee,50);}

    -----------------------------------------------------------


    <marquee><bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走!</marquee>


    最简单的图片移动特效———图片水平向左循环移动
    :<marquee>
    <img src="http://unibbs.unibbs.com/images/upphoto/647253.jpg">
    <img src="http://unibbs.unibbs.com/images/upphoto/647264.jpg">
    <img src="http://unibbs.unibbs.com/images/upphoto/647269.jpg">
    <img src="http://unibbs.unibbs.com/images/upphoto/647247.jpg">
    <img src="http://unibbs.unibbs.com/images/upphoto/648164.gif">
    <img src="http://unibbs.unibbs.com/images/upphoto/648169.gif">
    <img src="http://unibbs.unibbs.com/images/upphoto/648177.gif">
    <img src="http://unibbs.unibbs.com/images/upphoto/648182.gif">
    <img src="http://unibbs.unibbs.com/images/upphoto/648186.gif">
    <img src="http://unibbs.unibbs.com/images/upphoto/648189.gif">
    </marquee>

  • 相关阅读:
    第十周学习进度
    第九周学习进度
    冲刺阶段站立会议每日任务10
    冲刺阶段站立会议每日任务9
    冲刺阶段站立会议每日任务8
    冲刺阶段站立会议每日任务7
    第八周学习进度
    对输入法的评价
    冲刺阶段站立会议每日任务6
    冲刺阶段站立会议每日任务5
  • 原文地址:https://www.cnblogs.com/longshen/p/1621841.html
Copyright © 2011-2022 走看看