不知道各位 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属性与用法,能实现无缝循环滚动文字,上下,左右都可以
marquee一款非常NB的插件可以实现无缝滚动上下左右都可以。使用简单操作容易
网站中公告上下无缝滚动,marquee,要求每条广告的内容高度一致,如果想改成高度不一致的无缝滚动,联系我,我再发给你,懒得一批。
公告滚动动画,从右到左滚动,marquee标签效果
MARQUEE 元素 marquee 对象 doc 手册
滚动标记Marquee参数祥解及鼠标悬停,只要一个标签就能有动态效果
JavaScript ,前端,vue
js替代marquee实现图片无缝滚动 可能大家都碰到过,当marquee中滚动的是图片的时候,滚到终点的时候直接就跳回到起点了,而不像文字那样可以无缝滚动,下面介绍的是通过js来实现图片的无缝滚动。 先了解一下下面这...
jQuery 模拟 Marquee 无缝滚动 不间断滚动
经典的通过Marquee标签来控制滚动有许多不尽人意的地方,这一点想必略通网页设计的人都知道。鄙人上传的此脚本(含Demo)是一个Marquee类,开放了几个接口轻松实现滚动的方向、延时、尺寸等参数的设置,对从事网页...
js div实现左右滚动 无缝接 ,比 marquee强
NULL 博文链接:https://gsllong.iteye.com/blog/1096116
类似以前的公告通知,上下marquee滚动,导入该插件,调用myScroll方法, 设置speed即可。jQuery实现网站中公告上下无缝滚动,marquee(每条广告之间的高度无需一致),自己的坑自己来填了,这个和我以前上传的一样,...
近日研究marquee无缝隙循环,有些心得 因为是初学JS 所以从网上找了不少别人的例子 我发现了一下问题 1.大多数html代码不符合W3C的最新标准。 2.很多代码移植性太差。 3.向左循环的时候。除用表格方式外,必须固定...
实现图片文字,向左,向右,向上,向下无缝滚动,适合广告图片展示 浏览器兼容(IE、FF、Opera、NS、MYIE)
一个不错的字母滚动控件,可上下、左右,可改变字体
vs2015 c# 利用Form的透明属性、Threading.Timer实现的动态字幕、GDI+绘制文字、流水灯marquee。支持 ↓ 滚动、← 滚动;支持另一个进程更新播放列表(显示区域、字体)等。 public class MarqueeAreaStruct { ...
jQuery 模仿 Marquee 间歇式 无缝滚动 不间断滚动
网站文字滚动代码 <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" direction="up" > <div align="left" ><br /> <center ><font face="黑体" color="#008000" size="4" ></font ></center >