跑马灯 -- marquee

2024-02-21 15:32
文章标签 跑马灯 marquee

本文主要是介绍跑马灯 -- marquee,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

该标签不是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
设定活动字幕里所在的位置距离父容器水平边框的距离
This controls the horizontal(水平)space around the display box.
代码如下:
<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
设定活动字幕里所在的位置距离父容器垂直边框的距离
This controls the vertical(垂直) space around the display box.
代码如下:
<marquee vspace="100" bgcolor="#CCCCCC">hspace="100"</marquee>
loop
设定滚动的次数,当loop=-1表示一直滚动下去,默认为-1
代码如下:
<marquee loop="-1" bgcolor="#CCCCCC">我会不停地走。</marquee>
<p>&nbsp;</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>

这篇关于跑马灯 -- marquee的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/732246

相关文章

Android TextView设置跑马灯失效

1.关于问题 TextView失效在网上有详细的解决方案,大部分时候都能够很好的解决问题 下面给出网上的解决方案: <TextViewandroid:layout_width="100dp"android:layout_height="22dp"tools:text="水浇地放松放松开发的开始放假考试的飞机开了撒酒疯恐龙时代解封了开始的"android:ellipsize="marquee"

NSImageView 实现跑马灯效果

NSImageView 实现跑马灯效果 在一些View里面,需要延迟0.5秒才能刷新界面(比如Hidden等) M #import <Foundation/Foundation.h>@interface For_Thread_Var : NSObject{NSString *m_PicFileName_LoadingAnimation_Gray;NSString *m_PicFileN

iOS开发之跑马灯

1.法一: 类似于弹幕,一个label的实现 - (void)viewDidLoad {[super viewDidLoad];[self addPaomaLabel]; } - (void)addPaomaLabel {self.annonLabel = [[UILabel alloc]initWithFrame:CGRectMake(45, 8, ScreenWidth-45, 30

新增多种图表类型,新增视频、流媒体、跑马灯组件,DataEase开源数据可视化分析工具v2.7.0发布

2024年6月11日,人人可用的开源数据可视化分析工具DataEase正式发布v2.7.0版本。 这一版本的功能变动包括:图表方面,新增对称条形图、桑基图、流向地图、进度条等图表类型,并对已有的仪表盘、指标卡、明细表、汇总表、水波图、象限图、富文本等图表类型进行了功能增强和优化;仪表板和数据大屏方面,新增视频、流媒体、跑马灯组件,在数据大屏中也同步引入了查询组件的支持;X-Pack增强包方面,新

iOS 跑马灯效果

.h文件 /*** 跑马灯效果*/@interface LXMarquee : UIView{UILabel *marquee;//跑马灯label}@property (nonatomic, retain) UILabel *marquee;- (instancetype)initWithFrame:(CGRect)frame;- (void)setMarqueeDo;@end

网页设计(五)——marquee标签

前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者。最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~   首先给出一些关于marquee标签的介绍: marquee的作用是创建一个滚动的文本字幕 语法:<marquee>...</marquee>; 在标记“…”之间添加要进行滚动的内容。 重要属性: 1.滚动方向directio

跑马灯的两种实现方式

方式一:利用元素尺寸变化监听api,计算宽度,得出时间,进行无限次数动画。 优点:能自定义速度(0 - 1)。 <template><div class="box"><i class="iconfont icon-gonggao"></i><div class="marquee-box"><div ref="elRef" class="marquee"><slot></slot></div><

1、跑马灯之图片循环滚动

最近,公司做了好几个项目,第一个项目首页跑马灯的效果是我们亲爱滴组长同学写的,后面跑马灯的需求改变了而组长同学又搞别的路去了,于是把我叫了过去,组长很亲切滴对我讲,I am very busy,  Robert同学你来搞一下这个跑马灯效果。我很happy的接过了这个任务,不就几张图片滑啊滑么,我觉得应该very easy! 谁知道原来这竟然是个very large坑,从修改了第一个项目的跑马灯效果

TextView 实现跑马灯效果

<TextViewandroid:clickable="true"android:focusable="true"android:focusableInTouchMode="true"android:marqueeRepeatLimit="3"/> 跑马灯想要跑起来就需要控件获取到焦点,想要获取到焦点clickable、focusable、focusableInTouchMode就需要设置为tr

自定义的跑马灯控件

随时随地技术实战干货,获取项目源码、学习资料,请关注源代码社区公众号(ydmsq666) 原文转自:农民伯伯:【Android】不依赖焦点和选中的TextView跑马灯【2】 - 农民伯伯 - 博客园 package com.home.view;import com.home.util.DataUtil;import android.annotation.SuppressLint;im