`
Surmounting
  • 浏览: 66683 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

文本滚动元素 marquee 研究报告

阅读更多
不知道各位 JavaScript 开发者有没有关注过 W3C 在中国的官方教学网站: http://www.w3school.com.cn/
此网站非常全面,并且内容也很完整丰富。不过今天不是广告时间,因为我发现了一个 FireFox, Chrome, IE, Safari 都能支持的某 HTML 标签,这个网站上竟然没有介绍!

那就是 <marquee>,多么常用的文字滚动标签啊~接下来是我对此元素的分析结果,经考察公网上常见资料,已经很全了。
把 marquee 元素放入 FireBug 中观察,可以看到如下几个比较特别的属性和方法。

标签属性
behavior    滚动方式,有三种支持的值。
    ="scroll"    按指定方向从空白开始滚动。一次滚动完毕后会追加空白,直至内容完全滚掉,然后从头开始第二次滚动,往复。
    ="slide"    按指定方向从空白开始滚动一次并停止
    ="alternate"    按指定方向滚动到头后转为反向滚动,二种方向交替

direction    滚动方向,有二种支持的值。
    ="left"        从右往左滚动
    ="right"    从左往右滚动

loop        循环次数,必须为数字。此属性能令 behavior="slide" 的滚动成为多次。

scrollAmount    滚动每次跳动的像素。默认值各个浏览器似乎不一样。

scrollDelay    滚动每跳间隔的毫秒数。默认值各个浏览器似乎不一样。


自有事件句柄
onBounce(事件方法为onbounce)    转向事件,只在 behavior="alternate" 条件下才会激发。
onFinish(事件方法为onfinish)    完成事件。指定 loop 或者 behavior="slide" 条件下会激发。
onStart(事件方法为onstart)    开始事件。


内置方法
click()    含义尚未可知……真抱歉了……
init()    初始化方法,但目前看来 Chrome, IE 和 Safari  认为不具有此方法;FireFox 自己也无效果。
start()    启动方法,可以启动自身停止滚动的对象。
stop()    停止方法,停止自身滚动。停止的滚动对象可以通过 .start() 重新开始滚动。



技巧

实际使用中如果想重复循环,但不想经历留白,可以通过动态追加一组相同内容块的方式解决此问题。
比如对于文字 <span id="a">1234567</span> ,应使用 alternate 方式开始,然后立刻转为 scroll 方式,并在这段文字后边追加内容,变成 <span id="a">1234567</span> <span id="b">1234567</span> 。然后当自动滚动完 id="a" 的文字之后,删除原有 id="a" 这段文字,在 id="b" 那段文字后边再追加 id="a" 的新一段文本。以此能够实现文本永远滚不完的效果。
分享到:
评论

相关推荐

    利用Marquee实现无缝循环滚动文字

    它的主要功能是让内容(通常是文本或图像)在页面上水平或垂直滚动。 #### 2. Marquee标签基本用法 - **基本语法**: ```html &lt;marquee&gt;滚动的内容&lt;/marquee&gt; ``` - **常用属性**: - **`direction`**: 指定...

    marquee图片无缝滚动(上下左右均可)

    - **marquee**:这是HTML中的一个标签,用于创建元素的滚动效果,通常用于文本,但在这里可能被扩展用于图片。 **文件名称列表解析:** 由于只有一个文件名“marquee无缝滚动”,我们可以推测这可能是一个示例文件...

    MARQUEE 元素 marquee 对象 doc 手册

    - **用途**: 设置或获取文本滚动的方向。 - **示例**: `&lt;marquee direction="right"&gt;文字&lt;/marquee&gt;` 文字将从左向右滚动。 15. **`HEIGHT`** - `height` - **用途**: 设置或获取对象的高度。 - **示例**: `...

    公告滚动动画,从右到左滚动,marquee标签效果

    在这个例子中,`txtscroll公告滚动`可能是指使用了某种特定的文本滚动效果,而`从右到左招牌广告`可能是实际应用中的内容示例,表明这种滚动效果常用于显示招牌广告。 需要注意的是,虽然`&lt;marquee&gt;`在许多浏览器中...

    js Marquee上下滚动效果

    在网页设计中,Marquee元素常被用来实现文本或图像的滚动展示,尤其在有限的空间内展示大量信息时非常实用。本篇将深入讲解如何利用JavaScript实现一个上下滚动的效果,并参考提供的"MSClass.js"文件进行分析。 一...

    jQuery实现网站中公告上下无缝滚动,marquee

    这里,我们用`&lt;div class="marquee-container"&gt;`作为滚动容器,`&lt;div class="marquee-content"&gt;`用于包裹所有公告项,每个公告项都包裹在一个`.item`类的`&lt;div&gt;`中。确保所有公告项的高度一致,以达到无缝滚动的效果...

    字幕滚动——MarQuee控件

    在IT领域,尤其是在网页设计和用户界面开发中,"Marquee"控件是一个常见的元素,它主要用于实现文本或图像的滚动展示效果。标题中的“字幕滚动——MarQuee控件”指的就是这个功能,它允许信息以滚动的方式在有限的...

    js替代marquee实现图片无缝滚动

    通过JavaScript实现的无缝滚动相比`&lt;marquee&gt;`标签有更高的灵活性和控制性,可以适应不同的布局和滚动效果。这种技术可以应用于网站的广告栏、滚动新闻、产品展示等多个场景,提升用户界面的动态效果和交互体验。

    Marquee仿照LED广告文字滚动

    Marquee元素在网页设计中常被用来实现类似LED广告文字滚动的效果,它允许文本或内容在页面上持续滚动,从而吸引用户的注意力。这个压缩包文件"demoMarquee"提供了这样一个功能,用户可以自定义滚动速度、方向、文字...

    纯文字横向滚动组件 marquee.vue

    JavaScript ,前端,vue

    jQuery 模拟 Marquee 无缝滚动 不间断滚动

    Marquee 效果是传统 HTML 中的一种标签,用于实现文本或图像的不间断滚动,但在现代 web 开发中,我们通常使用 jQuery 来模拟这种效果,因为它提供了更大的灵活性和控制力。本文将深入探讨如何使用 jQuery 创建一个...

    javascript特效无缝滚动marquee

    "marquee"是HTML的一个非标准标签,用于创建一个自动移动(滚动)的文本或图像区域,而JavaScript则提供了更灵活和强大的控制方式来实现无缝滚动效果。 在JavaScript中,我们可以使用DOM操作、定时器(setTimeout或...

    文字滚动代码 marquee style="WIDTH: 388px;

    &lt;marquee behavior="alternate" direction="up" scrollamount="2" height="100"&gt;循环滚动文本&lt;/marquee&gt; ``` 这段代码中的文本将在指定区域内上下滚动。 ##### 示例 4:包含链接和图像 ```html &lt;marquee ...

    滚动标记Marquee参数祥解及鼠标悬停

    滚动标记Marquee参数祥解及鼠标悬停,只要一个标签就能有动态效果

    IE 展示 上下滚动 实现Marquee机制

    Marquee元素在HTML中用于创建一个可以自动滚动的内容区域,它可以向左、向右、向上或向下滚动文本或图像。 描述中提到的"NULL 博文链接:https://ruyuntao.iteye.com/blog/383504" 提供了一个博客文章的链接,虽然...

    marquee无缝隙循环

    在网页设计中,`&lt;marquee&gt;`元素常被用于创建滚动文字或图像的效果。不过,随着HTML5的普及,`&lt;marquee&gt;`已被废弃,转而推荐使用CSS动画或者JavaScript来实现相同的功能。本文将重点介绍如何使用JavaScript实现...

    Marquee仿照LED广告文字滚动 可设置滚动速度 滚动的方向,文字大小,文字颜色

    在Android中,`Marquee`是指一种文本滚动效果,主要应用于`TextView`组件。当`TextView`的`ellipsize`属性被设置为`marquee`时,并且`singleLine`或`maxLines`属性设置为1,文本就会自动向一侧滚动,形成跑马灯效果...

    marquee滚动效果源代码

    在网页设计中,"marquee"元素是一种常用于创建滚动效果的HTML标签,它能够实现文本或图像在页面上的连续滚动展示。这个标题"marquee滚动效果源代码"表明我们将探讨如何利用marquee标签实现两种特定的滚动效果:间歇...

    marquee效果

    这段代码首先获取了marquee元素的原始宽度,然后设置了一个滚动速度。`scrollMarquee`函数使用`animate`方法使元素向左移动,当元素完全滚动出视图后,将其重置回初始位置,并再次调用自身以保持滚动。`speed`变量...

    marquee.js插件演示9种jQuery滚动效果

    然后,为需要滚动的元素添加特定的类名,如`js-marquee`。接着,通过JavaScript或jQuery选择器初始化插件,并指定想要的效果: ```javascript $(document).ready(function() { $('.js-marquee').marquee({ // ...

Global site tag (gtag.js) - Google Analytics