|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 不二如是 于 2020-3-17 17:53 编辑
何为跑马灯?
解释太麻烦,接Gif~
没错,没想到如此高大上的名字(也没高大上到哪里 )
就是marquee!,跑马灯。
只有一个标签:
但是,却有10+个属性值!
先看下,最纯粹的跑马灯代码;
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- </head>
- <body>
- <marquee ><font size="15" color="#00FFFF">各祝鱼油,鸡年大吉(J)~</font></marquee>
- </body>
- </html>
复制代码
<font>,是修改字体的,不用我多说了吧。
为了,响应过年气氛,把字体设置成白色,背景色喜庆的桃红色#FF3333(颜色字体大全)
好的,进入正题!
- 背景色
marquee中,用bgcolor来修改背景色。
- <marquee bgcolor="#FF3333"><font size="15" color="#FFF">各祝鱼油,鸡年大吉(J)~</font></marquee>
复制代码 :
效果图;
是不是一下就很有节日气氛啦~
- 滚动速度
scrollamount,用来设置字幕滚动速度,默认值是6,实在是有些慢。
单位是pixels,就是像素/s。
- <marquee bgcolor="#FF3333" scrollamount="8"><font size="15" color="#FFF">各祝鱼油,鸡年大吉(J)~</font></marquee>
复制代码
效果图
建议速度,8-10,太快不好,你懂的,尽力而为~
- 滚动延迟
scrolldelay滚动延迟,就是两次滚动间的延迟时间,单位millisecond(毫秒)。
感觉没啥用,不演示了,仅作为和scrollamount的对比演示。
- 滚动方向
direction,默认的滚动方向从右到左。
up,向上滚动;down,向下滚动;left,从右向左;right,从左向右
- <marquee bgcolor="#FF3333" scrollamount="8" direction="down"><font size="15" color="#FFF">各祝鱼油,鸡年大吉(J)~</font></marquee>
复制代码
效果图:
- 滚动背景高、宽度
默认height,高度为100px
设置为,宽度666px,高度888px:
- <marquee bgcolor="#FF3333" scrollamount="8" direction="down" height="888" width="666"><font size="15" color="#FFF">各祝鱼油,鸡年大吉(J)~</font></marquee>
复制代码
效果图:
- 距离父级窗口的高、宽度
hspace,活动字幕里所在的位置,距离父容器水平边框的距离;
vspace,活动字幕里所在的位置,距离父容器垂直边框的距离;
因为,父级代码就是body,所以就是和界面边框的距离。
这样就能让滚动区域,显示在屏幕中间了:
- <marquee bgcolor="#FF3333" scrollamount="8" direction="down" height="888" width="666" hspace="300" vspace="200"><font size="15" color="#FFF">各祝鱼油,鸡年大吉(J)~</font></marquee>
复制代码
效果图:
- 字体居中
align,设定<marquee>标签内容的对齐方式。
absbottom:绝对底部对齐(与g、p等字母的最下端对齐)
absmiddle:绝对中间对齐
baseline:底线对齐
bottom:底部对齐(默认)
left:左对齐
middle:中间对齐
right:右对齐
texttop:顶线对齐
top:顶部对齐
默认左对齐,用middle就可以设置为中间了:
- <marquee bgcolor="#FF3333" scrollamount="8" direction="down" height="888" width="666" hspace="300" vspace="200" align="middle"><font size="15" color="#FFF">各祝鱼油,鸡年大吉(J)~</font></marquee>
复制代码
效果图:
- 滚动的方式
behavior滚动方式,就是字幕在marquee的滚动方式。
alternate: 表示在两端之间来回滚动。
scroll: 表示由一端滚动到另一端,会重复。
slide: 表示由一端滚动到另一端,不会重复。
注意啊!
默认的behavior方式,只支持左右滚动!
上下就不行了!
- <marquee bgcolor="#FF3333" scrollamount="8" direction="down" align="middle" behavior="alternate"><font size="15" color="#FFF">各祝鱼油,鸡年大吉(J)~</font></marquee>
复制代码
效果图,就傻傻的呆在那里了:
修改代码,删掉居中,宽高属性:
- <marquee bgcolor="#FF3333" scrollamount="8" direction="left" behavior="alternate"><font size="15" color="#FFF">各祝鱼油,鸡年大吉(J)~</font></marquee>
复制代码
效果图:
- 人机交互
onMouseOut=this.start() 或者this.stop() :用来设置鼠标移出该区域时继续/停止滚动
设置鼠标移出开始、移入停止。
- <marquee bgcolor="#FF3333" scrollamount="8" direction="left" behavior="alternate" onMouseOut="this.start()" onMouseOver="this.stop()"><font size="15" color="#FFF" >各祝鱼油,鸡年大吉(J)~</font></marquee>
复制代码
效果图:
- 广告超链接
没猜错,这是一个广告跑马灯
- <marquee bgcolor="FF3333" direction="right" behavior="alternate" scrollamount="15"><a href=http://bbs.fishc.com/forum-337-1.html><font face="fantasy" color=#00FF00 size=6><STRONG>欢迎来到小天才养殖场</a></marquee>
复制代码
效果图:
这位鱼油,如果喜欢本系列HTML帖子,请订阅 专辑☞( 传送门)( 不喜欢更要订阅 ) |
评分
-
查看全部评分
|