HTMl 中marquee标识完成无缝拼接翻转跑马灯实际效

<marquee>标识,它是成对出現的标识,首标识<marquee>和尾标识</marquee>之间的內容便是翻转內容。<marquee>标识的特性关键有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等,它们全是可选的。

今日在做手机微信端大转盘抽奖时,想把全部客户的抽奖纪录做成无缝拼接翻转的实际效果,无可奈何我的js基本功太差,1时想不出完成的方式,便百度搜索各种各样类似实际效果。但不经意中发现了1个html标识——<marquee></marquee>能够完成多种多样翻转实际效果,不用js操纵。应用marquee标识不但能够翻转文本,还可以翻转照片,报表等,并且应用起来便捷便捷,真的为我节约了很多時间。

marquee标识并不是HTML3.2的1一部分,而且只适用MSIE3之后核心,因此假如你应用非IE核心访问器(如:Netscape)将会没法看到下面1些很成心思的实际效果,该标识是个器皿标识。

1、marquee标识的几个关键特性:

1.direction:翻转方位(包含4个值:up、down、left、right)

表明:up:从下向上翻转;down:从上向下翻转;left:从右向左翻转;right:从左向右翻转。

英语的语法:<marquee direction="翻转方位">...</marquee>

2.behavior:翻转方法(包含3个值:scroll、slide、alternate)

表明:scroll:循环系统翻转,默认设置实际效果;slide:只翻转1次就终止;alternate:往返更替开展翻转。

英语的语法:<marquee behavior="翻转方法">...</marquee>

3.scrollamount:翻转速率(翻转速率是设定每次翻转时挪动的长度,以像素为企业)

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

4.scrolldelay:设置翻转两次之间的延迟时间時间,值大了会有1步1间断的实际效果(设定翻转的時间间距,企业是毫秒)

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

5.loop:设置翻转循环系统的次数(默认设置值是⑴,翻转会持续的循环系统下去)

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

<marquee loop="⑴" bgcolor="#CCCCCC">我会不断地走。</marquee>

<marquee loop="2" bgcolor="#CCCCCC">我只走两次哦</marquee>

6.width、height:设置翻转字幕的宽度、高宽比

英语的语法:<marquee width="500" height="200">...</marquee>

7.bgcolor:设置翻转字幕的情况色调(能够是色调值,还可以是rgb()或rgba()涵数)

英语的语法:<marquee bgcolor="rgba(0,0,0,0.2)">...</marquee>

8.hspace、vspace:空白室内空间(非常于设定margin值)

表明:hspace:设置主题活动字幕里所属的部位间距父器皿水平边框的间距,如hspace=“10”,即等同于于:margin:0 10px;

vspace:设置主题活动字幕里所属的部位间距父器皿竖直边框的间距,如vspace=“10”,即等同于于:margin:10px 0;

英语的语法:<marquee hspace="10" vspace="10">...</marquee>(等同于于:margin:10px;)

9.align:设置翻转字幕內容的对齐方法(包含9个值:absbottom、absmiddle、baseline、bottom、left、middle、right、 texttop、top)

表明:absbottom:肯定底部对齐(与g、p等字母的最下端对齐)
absmiddle:肯定中间对齐
baseline:底线对齐
bottom:底部对齐(默认设置)
left:左对齐
middle:正中间对齐
right:右对齐
texttop:顶线对齐
top:顶部对齐

英语的语法:<marquee align="对齐方法">...</marquee>

10.face:设置翻转字幕的文本字体样式

英语的语法:<marquee font="楷体_GB2312"></marquee>

11.color:设置翻转字幕的文本色调

英语的语法:<marquee color="#333"></marquee>

12.size:设置翻转字幕的文本字号

英语的语法:<marquee size="3"></marquee>

13.STRONG:设置翻转字幕的文本加粗

英语的语法:<marquee STRONG></marquee>

2、marquee常见到的两个恶性事件:

onMouseOut="this.start()" 用来设定电脑鼠标移出该地区时再次翻转
onMouseOver="this.stop()" 用来设定电脑鼠标移入该地区时终止翻转

 <marquee onMouseOut="this.start()" onMouseOver="this.stop()">marquee常见到的两个恶性事件</marquee>   

详细编码以下:

 <marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50"            vspace="20" loop="⑴" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">

虽然<marquee>主要参数很多,但终究不可以完成繁杂的和自定的独特跑马灯实际效果,并且也有访问器限定,因此大家更多状况下会选用JavaScript来完成跑马灯翻转实际效果。

到此这篇有关HTMl 中marquee标识完成无缝拼接翻转跑马灯实际效果的文章内容就详细介绍到这了,更多有关marquee无缝拼接翻转跑马灯內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!