欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

<marquee> 滚动 有大用

HTML标签marquee实现滚动效果

 

正文

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

一、标签属性

1.滚动方向direction(包括4个值:up、 down、 left和 right)

  语法:<marquee direction="滚动方向">...</marquee>

2.滚动方式behavior(scroll:循环滚动,默认效果; slide:只滚动一次就停止; alternate:来回交替进行滚动)

  语法:<marquee behavior="滚动方式">...</marquee>

3.滚动速度scrollamount(滚动速度是设置每次滚动时移动的长度,以像素为单位;如果没有它,默认为6,建议设为1~3比较好。)

  语法:<marquee scrollamount="5">...</marquee>

4.滚动延迟scrolldelay(设置滚动的时间间隔,单位是毫秒,通常scrolldelay是不需要设置的。)

  语法:<marquee scrolldelay="100">...</marquee>

5.滚动循环loop(默认值是-1,滚动会不断的循环下去)

  语法:<marquee loop="2">...</marquee>

6.滚动范围width、height

7.滚动背景颜色bgcolor

8.空白空间hspace、vspace

 

二、事件

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

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

 

三、实例

1.给滚动字幕添加超链接

<marquee scrollAmount=2 width=300><a href=http://www.cctv.com>中央电视台</a></marquee>

2.鼠标停留在文字上,文字停止滚动

<marquee scrollAmount=2 width=300 onmouseover=stop() onmouseout=start()>文字内容</marquee>

3.多行文本向上滚动

<marquee scrollAmount=2 width=300 height=160 direction=up>·早晨好啊!<br>·空气好清新啊<br>·今朝食乜好呢?<p>·<a href=http://www.cctv.com>中央电视台</a></marquee>  

  注意:如果你的网页经过了FrontPage编辑,保存之后,只能滚动一行,这时候你发现你原来的代码顺序已经变了,My god!解决的办法是,找出原来的代码,把它嵌入到JavaScript的document.write中即可,上述代码写为:

复制代码
<script>
    document.write('
        <marquee scrollAmount=2 width=300 height=160 direction=up>
        ·早晨好啊!<br>
        ·空气好清新啊<br>
        ·今朝食乜好呢?<p>
        ·<a href=http://www.cctv.com>中央电视台</a>
</marquee>
    ')
</script>                    
复制代码

 

 

/*参考资料:

*1.http://www.cnblogs.com/mountain-mist/articles/975781.html

*2.http://www.cnblogs.com/zzuIvy/p/marqueeTest_1.html

*/

 

分类: HTML+CSS



来自  https://www.cnblogs.com/jasmine-95/p/5432779.html


 已废弃
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

HTML marquee 元素(<marquee>) 用来插入一段滚动的文字。你可以使用它的属性控制当文本到达容器边缘发生的事情。

 <marquee> 元素已经 过时,请不要再使用。尽管一些浏览器仍然支持它,但它不是必须的。此外,使用这个元素基本上是你可以对你的用户做最糟糕的事情之一,所以请不要这样做。

属性

  • behavior

  • 设置文本在 marquee 元素内如何滚动。可选值有 scrollslide 和 alternate。 如果未指定值,默认值为 scroll。

  • bgcolor

  • 通过颜色名称或十六进制值设置背景颜色。

  • direction

  • 设置 marquee 内文本滚动的方向。可选值有 leftrightup and down。如果未指定值,默认值为 left。

  • height

  • 以像素或百分比值设置高度。

  • hspace

  • 设置水平边距。

  • loop

  • 设置 marquee 滚动的次数。如果未指定值,默认值为 −1,表示 marquee 将连续滚动.

  • scrollamount

  • 设置每次滚动时移动的长度(以像素为单位)。默认值为 6。

  • scrolldelay

  • 设置每次滚动时的时间间隔(以毫秒为单位)。默认值为 85。请注意, 除非指定 truespeed 值,否则将忽略任何小于 60 的值,并改为使用 60。

  • truespeed

  • 默认情况下,会忽略小于60的scrolldelay值。如果存在truespeed,那些值不会被忽略。

  • vspace

  • 以像素或百分比值设置垂直边距。

  • width

  • 以像素或百分比值设置宽度。

事件回调

  • onbounce

  • 当 marquee 滚动到结尾时触发。它只能在 behavior 属性设置为 alternate 时触发。

  • onfinish

  • 当 marquee 完成 loop 属性设置的值时触发。它只能在 loop 属性设置为大于 0 的某个数字时触发。

  • onstart

  • 当 marquee 开始滚动时触发。

方法

  • start

  • 开始滚动 marquee。

  • stop

  • 停止滚动 marquee。

示例

<marquee>This text will scroll from right to left</marquee>

<marquee direction="up">This text will scroll from bottom to top</marquee>

<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
  <marquee behavior="alternate">
    This text will bounce
  </marquee>
</marquee>

规范

SpecificationStatusComment
HTML Living Standard
<marquee>
Living StandardMake it obsolete in favor of CSS but define its expected behavior, for backward compatibility.
HTML5
<marquee>
RecommendationMake it obsolete in favor of CSS but define its expected behavior, for backward compatibility.

浏览器兼容性


We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!


FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0(Yes)1.0 (1.7 or earlier)2.07.21.2
truespeed attribute未实现(Yes)3.0 (1.9)4.0未实现未实现
hspace/vspace attribute?(Yes)3.0 (1.9)???
loop attribute?(Yes)3.0 (1.9)???
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support?(Yes)1.0 (1.0)???
truespeed attribute?(Yes)1.0 (1.0)???
hspace/vspace attribute?(Yes)1.0 (1.0)???
loop attribute?(Yes)1.0 (1.0)???


Metadata



来自   https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/marquee


html中的marquee属性

时间: 2019-09-12阅读: 36844标签: 属性

该标签不是html3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果,该标签是个容器标签。

语法

<marquee></marquee>

以下是一个最简单的例子,代码如下:

<marquee><font size=+3 color=red>Hello, World</font></marquee>

下面这两个事件经常用到:

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

代码如下:

<marquee onMouseout="this.start()" onMouseover="this.stop()">onMouseout="this.start()" :用来设置鼠标移出该区域时继续滚动 onMouseover="this.stop()":用来设置鼠标移入该区域时停止滚动</marquee>

这是一个完整的例子:

代码如下:

<marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" onMouseout="this.start()" onMouseover="this.stop()">
这是一个完整的例子
</marquee>

该标签支持的属性多达11个:


align

设定<marquee>标签内容的对齐方式

absbottom:绝对底部对齐(与g、p等字母的最下端对齐)
absmiddle:绝对中央对齐
baseline:底线对齐
bottom:底部对齐(默认)
left:左对齐
middle:中间对齐
right:右对齐
texttop:顶线对齐
top:顶部对齐

代码如下:

<marquee align="absbottom">align="absbottom":绝对底部对齐(与g、p等字母的最下端对齐)。 </marquee>
<marquee align="absmiddle">align="absmiddle": 绝对中央对齐。 </marquee>
<marquee align="baseline">align="baseline": 底线对齐。 </marquee>
<marquee align="bottom">align="bottom": 底部对齐(默认)。 </marquee>
<marquee align="left">align="left": 左对齐。 </marquee>
<marquee align="middle">align="middle": 中间对齐。 </marquee>
<marquee align="right">align="right": 右对齐。 </marquee>
<marquee align="texttop">align="texttop": 顶线对齐。 </marquee>
<marquee align="top">align="top": 顶部对齐。 </marquee>


behavior

设定滚动的方式:

alternate: 表示在两端之间来回滚动。

scroll: 表示由一端滚动到另一端,会重复。

slide:  表示由一端滚动到另一端,不会重复。

代码如下:

<marquee behavior="alternate">alternate:表示在两端之间来回滚动。 </marquee>
<marquee behavior="scroll">scroll:表示由一端滚动到另一端,会重复。</marquee>
<marquee behavior="slide">slide:  表示由一端滚动到另一端,不会重复。</marquee>


bgcolor

设定活动字幕的背景颜色,背景颜色可用RGB、16进制值的格式或颜色名称来设定。代码如下:

<marquee bgcolor="#006699">设定活动字幕的背景颜色 bgcolor="#006699"</marquee>
<marquee bgcolor="RGB(10%,50%,100%,)">设定活动字幕的背景颜色 bgcolor="rgb(10%,50%,100%,)"</marquee>
<marquee bgcolor="red">设定活动字幕的背景颜色 bgcolor="red"</marquee>


direction

设定活动字幕的滚动方向,代码如下:

<marquee direction="down">设定活动字幕的滚动方向direction="down":向下</marquee>
<marquee direction="left">设定活动字幕的滚动方向direction="left":向左</marquee>
<marquee direction="right">设定活动字幕的滚动方向direction="right":向右</marquee>
<marquee direction="up">设定活动字幕的滚动方向direction="up":向上</marquee>


height

设定活动字幕的高度,代码如下:

<marquee height="500" direction="down" bgcolor="#CCCCCC">设定活动字幕的高度height="500"</marquee>


width

设定活动字幕的宽度,代码如下:

<marquee width="500" bgcolor="#CCCCCC">设定活动字幕的宽度width="500"</marquee>


hspace

设定活动字幕里所在的位置距离父容器水平边框的距离,代码如下:

<table width="500" border="1" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><marquee hspace="100" bgcolor="#CCCCCC">hspace="100"</marquee></td>
  </tr>
</table>


vspace

设定活动字幕里所在的位置距离父容器垂直边框的距离,代码如下:

<marquee vspace="100" bgcolor="#CCCCCC">hspace="100"</marquee>


loop

设定滚动的次数,当loop=-1表示一直滚动下去,默认为-1,代码如下:

<marquee loop="-1" bgcolor="#CCCCCC">我会不停地走。</marquee>
<p> </p>
<marquee loop="2" bgcolor="#CCCCCC">我只走两次哦</marquee>


scrollamount

设定活动字幕的滚动速度,单位pixels,代码如下:

<marquee scrollamount="10" >scrollamount="10" </marquee>
<marquee scrollamount="20" >scrollamount="20" </marquee>
<marquee scrollamount="30" >scrollamount="30" </marquee>


scrolldelay

设定活动字幕滚动两次之间的延迟时间,单位millisecond(毫秒),值大了会有一步一停顿的效果。代码如下:

<marquee scrolldelay="10" >scrolldelay="10" </marquee>
<marquee scrolldelay="100" > scrolldelay="100"</marquee>
<marquee scrolldelay="1000">scrolldelay="1000" </marquee>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5296


来自   http://www.fly63.com/article/detial/5296

普通分类: