加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 (https://www.hunanwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程 > 正文

HTMl 中marquee标签实现无缝转动赛马灯结果

发布时间:2020-03-28 23:36:07 所属栏目:编程 来源:站长网
导读:marquee标签,它是成对呈现的标签,首标签marquee和尾标签/marquee之间的内容就是转动内容。marquee标签的属性首要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等,它们都是可选的。 本日在做微信端

<marquee>标签,它是成对呈现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是转动内容。<marquee>标签的属性首要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等,它们都是可选的。

本日在做微信端的大转盘抽奖时,想把全部用户的抽奖记录做成无缝转动的结果,无奈我的js功底太差,一时想不出实现的要领,便百度各类相似结果。但有时中发明白一个html标签——<marquee></marquee>可以实现多种转动结果,无需js节制。行使marquee标签不只可以转动笔墨,也可以转动图片,表格等,并且行使起来利便快捷,真的为我节减了不少时刻。

marquee标签不是HTML3.2的一部门,而且只支持MSIE3往后内核,以是假如你行使非IE内核赏识器(如:Netscape)也许无法看到下面一些很故意思的结果,该标签是个容器标签。

一、marquee标签的几个重要属性:

1.direction:转动偏向(包罗4个值:up、down、left、right)

声名:up:从下向上转动;down:从上向下转动;left:从右向左转动;right:从左向右转动。

语法:<marquee direction="转动偏向">...</marquee>

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

声名:scroll:轮回转动,默认结果;slide:只转动一次就遏制;alternate:往返瓜代举办转动。

语法:<marquee behavior="转动方法">...</marquee>

3.scrollamount:转动速率(转动速率是配置每次转动时移动的长度,以像素为单元)

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

4.scrolldelay:设定转动两次之间的耽误时刻,值大了会有一步一搁浅的结果(配置转动的时距离断,单元是毫秒)

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

5.loop:设定转动轮回的次数(默认值是-1,转动会不绝的轮回下去)

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

<marquee loop="-1" 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>

二、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="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">

尽量<marquee>参数不少,但事实不能实现伟大的和自界说的非凡赛马灯结果,并且尚有赏识器限定,以是我们更多环境下会回收JavaScript来实现赛马灯转动结果。

到此这篇关于HTMl 中marquee标签实现无缝转动赛马灯结果的文章就先容到这了,更多相干marquee无缝转动赛马灯内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章,但愿各人往后多多支持剧本之家!

(编辑:湖南网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读