不知道各位 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" 的新一段文本。以此能够实现文本永远滚不完的效果。
分享到:
相关推荐
它的主要功能是让内容(通常是文本或图像)在页面上水平或垂直滚动。 #### 2. Marquee标签基本用法 - **基本语法**: ```html <marquee>滚动的内容</marquee> ``` - **常用属性**: - **`direction`**: 指定...
- **marquee**:这是HTML中的一个标签,用于创建元素的滚动效果,通常用于文本,但在这里可能被扩展用于图片。 **文件名称列表解析:** 由于只有一个文件名“marquee无缝滚动”,我们可以推测这可能是一个示例文件...
- **用途**: 设置或获取文本滚动的方向。 - **示例**: `<marquee direction="right">文字</marquee>` 文字将从左向右滚动。 15. **`HEIGHT`** - `height` - **用途**: 设置或获取对象的高度。 - **示例**: `...
在这个例子中,`txtscroll公告滚动`可能是指使用了某种特定的文本滚动效果,而`从右到左招牌广告`可能是实际应用中的内容示例,表明这种滚动效果常用于显示招牌广告。 需要注意的是,虽然`<marquee>`在许多浏览器中...
在网页设计中,Marquee元素常被用来实现文本或图像的滚动展示,尤其在有限的空间内展示大量信息时非常实用。本篇将深入讲解如何利用JavaScript实现一个上下滚动的效果,并参考提供的"MSClass.js"文件进行分析。 一...
这里,我们用`<div class="marquee-container">`作为滚动容器,`<div class="marquee-content">`用于包裹所有公告项,每个公告项都包裹在一个`.item`类的`<div>`中。确保所有公告项的高度一致,以达到无缝滚动的效果...
在IT领域,尤其是在网页设计和用户界面开发中,"Marquee"控件是一个常见的元素,它主要用于实现文本或图像的滚动展示效果。标题中的“字幕滚动——MarQuee控件”指的就是这个功能,它允许信息以滚动的方式在有限的...
通过JavaScript实现的无缝滚动相比`<marquee>`标签有更高的灵活性和控制性,可以适应不同的布局和滚动效果。这种技术可以应用于网站的广告栏、滚动新闻、产品展示等多个场景,提升用户界面的动态效果和交互体验。
Marquee元素在网页设计中常被用来实现类似LED广告文字滚动的效果,它允许文本或内容在页面上持续滚动,从而吸引用户的注意力。这个压缩包文件"demoMarquee"提供了这样一个功能,用户可以自定义滚动速度、方向、文字...
JavaScript ,前端,vue
Marquee 效果是传统 HTML 中的一种标签,用于实现文本或图像的不间断滚动,但在现代 web 开发中,我们通常使用 jQuery 来模拟这种效果,因为它提供了更大的灵活性和控制力。本文将深入探讨如何使用 jQuery 创建一个...
"marquee"是HTML的一个非标准标签,用于创建一个自动移动(滚动)的文本或图像区域,而JavaScript则提供了更灵活和强大的控制方式来实现无缝滚动效果。 在JavaScript中,我们可以使用DOM操作、定时器(setTimeout或...
<marquee behavior="alternate" direction="up" scrollamount="2" height="100">循环滚动文本</marquee> ``` 这段代码中的文本将在指定区域内上下滚动。 ##### 示例 4:包含链接和图像 ```html <marquee ...
滚动标记Marquee参数祥解及鼠标悬停,只要一个标签就能有动态效果
Marquee元素在HTML中用于创建一个可以自动滚动的内容区域,它可以向左、向右、向上或向下滚动文本或图像。 描述中提到的"NULL 博文链接:https://ruyuntao.iteye.com/blog/383504" 提供了一个博客文章的链接,虽然...
在网页设计中,`<marquee>`元素常被用于创建滚动文字或图像的效果。不过,随着HTML5的普及,`<marquee>`已被废弃,转而推荐使用CSS动画或者JavaScript来实现相同的功能。本文将重点介绍如何使用JavaScript实现...
在Android中,`Marquee`是指一种文本滚动效果,主要应用于`TextView`组件。当`TextView`的`ellipsize`属性被设置为`marquee`时,并且`singleLine`或`maxLines`属性设置为1,文本就会自动向一侧滚动,形成跑马灯效果...
在网页设计中,"marquee"元素是一种常用于创建滚动效果的HTML标签,它能够实现文本或图像在页面上的连续滚动展示。这个标题"marquee滚动效果源代码"表明我们将探讨如何利用marquee标签实现两种特定的滚动效果:间歇...
这段代码首先获取了marquee元素的原始宽度,然后设置了一个滚动速度。`scrollMarquee`函数使用`animate`方法使元素向左移动,当元素完全滚动出视图后,将其重置回初始位置,并再次调用自身以保持滚动。`speed`变量...
然后,为需要滚动的元素添加特定的类名,如`js-marquee`。接着,通过JavaScript或jQuery选择器初始化插件,并指定想要的效果: ```javascript $(document).ready(function() { $('.js-marquee').marquee({ // ...