marquee标签详解

HTML 在线编辑器:https://c.runoob.com/front-end/61

介绍：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

html标签 – 
可以实现多种滚动效果，无需js控制。使用marquee标记不仅可以移动文字，也可以移动图片，表格等.只需要在
内部输入要滚动的内容即可。

主要属性：（都是可选的）

• behavior               （控制滚动）
• bgcolor                 （文字滚动范围的背景颜色）
• direction              （文字滚动的方向）
• width                    （决定滚动文字在页面中的矩形范围的宽度）
• height                   （决定滚动文字在页面中的矩形范围的高度）
• hspace                 （滚动矩形区域距周围的空白区域）
• vspace                  （滚动矩形区域距周围的空白区域）
• loop                      （ 滚动文字的滚动次数）
• scrollamount       （文字滚动的速度）
• scrolldelay           （文字滚动的速度）
• align                     （滚动文字位于距形内边框的上下左右位置）

参数 ：

一、属性

behavior属性 ：

behavior属性的参数值为alternate、scroll、slide中的一个，分别表示文字来回滚动、单方向循环滚动、只滚动一次，需要注意的是:如果在

标签中同时出现了direction和behavior属性，那么scroll和slide的滚动方向将依照direction属性中参数的设置。 

 

 
    
      我来回滚动 
      
    
      我单方向循环滚动 
     
    
      我单方向向上循环滚动 
      
    
      我只滚动一次 
      
    
      我改向上只滚动一次了 
     

bgcolor属性：

文字滚动范围的背景颜色，参数值是16进制(形式:#AABBCC或#AA5566等)或预定义的颜色名字(如red、yellow、blue等)。如下所示:

 
    
      我的背景色是红色的 
     

direction属性 ：

文字滚动的方向，属性的参数值有down、left、right、up共四个单一可选值，分别代表滚动方向向下、向左、向右、向上。如下所示: 

 
    
      我向右滚动 
      
    
      我向下滚动 
     

width和height属性 ：

width和height属性的作用决定滚动文字在页面中的矩形范围大小。width属性用以规定矩形的宽度，height属性规定矩形的高度。这两个属性的参数值可以是数字或者百分数，数字表示矩形所占的(宽或高)像素点数，百分数表示矩形所占浏览器窗口的(宽或高)百分比。如下所示: 

 
    
      我宽300像素，高30像素。 
     

hspace和vspace属性 ：

这两个属性决定滚动矩形区域距周围的空白区域. 

 
    
      我矩形边缘水平和垂直距周围各10像素。 
      
    
      我矩形边缘水平和垂直距周围各50像素。 
     

loop属性 ：

loop属性决定滚动文字的滚动次数，缺省是无限循环。参数值可以是任意的正整数，如果设置参数值为-1或infinite时将无限循环。如下所示: 

 
    
      我滚动2次。 
      
    
      我无限循环滚动。 
      
    
      我无限循环滚动。 
     

scrollamount和scrolldelay属性 ：

这两个属性决定文字滚动的速度(scrollamount)和延时(scrolldelay)，参数值都是正整数。如下所示: 

 
    
      我速度很快. 
      
    
      我慢了些。 
      
    
      我小步前进。 
      
    
      我大步前进。 
     

align属性 ：

这个属性决定滚动文字位于距形内边框的上下左右位置。您也可以将

和
之间的内容替换为图像或其它对象等功能。

 注释  ：

• marquee 元素的默认宽度与其父元素的宽度相等。如果 marquee 位于没有指定宽度的 TD 内，你就需要明确设置 marquee 的宽度。如果 marquee 和 TD 的宽度都没有指定，那么滚动字幕就将限定于 1 个像素宽。
• 要创建垂直滚动的字幕，请将其 scrollLeft 属性设定为 0。要创建水平滚动的字幕，请将其 scrollTop 属性设定为 0，这将覆盖任何脚本设置。 
• scrollLeft 和 scrollTop 属性当字幕滚动时为只读。当不处于滚动状态时，scrollLeft 对于设置为水平滚动的字幕来说为可读写，scrollTop 对于设置为垂直滚动的字幕来说为可读写。 
• 此元素在 Microsoft® Internet Explorer 3.0 的 HTML 中可用，在 Internet Explorer 4.0 的脚本中可用。 
• 此元素是块元素。 
• 此元素需要关闭标签。 

示例 

下面的例子使用了 marquee 元素创建了由左向右的滚动字幕，移动速度为每 200 毫秒 10 像素。 

 
    
      这是一个滚动字幕。 
     

演示多行文本向上滚动 

 
    
      ·早晨好啊！ 
     
·空气好清新啊 
·今朝食乜好呢？ 
·中央电视台
 
 
 



 
    

 下面的例子显示了 marquee 元素的 scrollLeft 和 scrollTop 属性的一些用途。

 
    
      向右 
     
     读取
 
      停止并设置 scrollLeft=190
 开始

所有代码：

 
    
      我来回滚动 
      
    
      我单方向循环滚动 
     
    
      我单方向向上循环滚动 
      
    
      我只滚动一次 
      
    
      我改向上只滚动一次了 
      
    
 
     
       我的背景色是红色的 
       
     
 
      
        我向右滚动 
        
      
        我向下滚动 
        
      
 
       
         我宽300像素，高30像素。 
         
       
 
        
          我矩形边缘水平和垂直距周围各10像素。 
          
        
          我矩形边缘水平和垂直距周围各50像素。 
          
        
 
         
           我滚动2次。 
           
         
           我无限循环滚动。 
           
         
           我无限循环滚动。 
           
         
 
          
            我速度很快. 
            
          
            我慢了些。 
            
          
            我小步前进。 
            
          
            我大步前进。 
            
          
 
           
             这是一个滚动字幕。 
             
           
 
            
              向右 
             
             
            读取 
            
 
              停止并设置 scrollLeft=190
 开始


 




 
            
           
          
         
        
       
      
    

二、事件

1.onmouseout()=“this.start()” :用来设置鼠标移出改区域时继续滚动

2.onmouseover()=“this.stop()” :用来设置鼠标移入改区域时停止滚动

实例：

1、鼠标停留在文字上，文字停止滚动

 
     
       文字内容 
     

转载：https://www.cnblogs.com/jianmeng/p/7022288.html

转载：https://www.cnblogs.com/jasmine-95/p/5432779.html