年庆版 #鱼C跑马灯 |【欢脱春节】

不二如是 · 发表于 2017-1-22 10:27:52

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2020-3-17 17:53 编辑

何为跑马灯？

解释太麻烦，接Gif～

没错，没想到如此高大上的名字（也没高大上到哪里

）

就是marquee！，跑马灯。

只有一个标签：

<marquee></marquee>

复制代码

但是，却有10+个属性值！

先看下，最纯粹的跑马灯代码；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<marquee >各祝鱼油，鸡年大吉(J)～</marquee>
</body>
</html>

复制代码

，是修改字体的，不用我多说了吧。

为了，响应过年气氛，把字体设置成白色，背景色喜庆的桃红色#FF3333（颜色字体大全）
好的，进入正题！

背景色

<marquee bgcolor="#FF3333">各祝鱼油，鸡年大吉(J)～</marquee>

复制代码

滚动速度

<marquee bgcolor="#FF3333" scrollamount="8">各祝鱼油，鸡年大吉(J)～</marquee>

复制代码

太快不好，你懂的

滚动延迟

滚动方向

up

down

left

right

<marquee bgcolor="#FF3333" scrollamount="8" direction="down">各祝鱼油，鸡年大吉(J)～</marquee>

复制代码

滚动背景高、宽度

<marquee bgcolor="#FF3333" scrollamount="8" direction="down" height="888" width="666">各祝鱼油，鸡年大吉(J)～</marquee>

复制代码

距离父级窗口的高、宽度

水平边框

垂直边框

<marquee bgcolor="#FF3333" scrollamount="8" direction="down" height="888" width="666" hspace="300" vspace="200">各祝鱼油，鸡年大吉(J)～</marquee>

复制代码

字体居中

absbottom：绝对底部对齐（与g、p等字母的最下端对齐）

absmiddle：绝对中间对齐

baseline：底线对齐

bottom：底部对齐（默认）

left：左对齐

middle：中间对齐

right：右对齐

texttop：顶线对齐

top：顶部对齐

<marquee bgcolor="#FF3333" scrollamount="8" direction="down" height="888" width="666" hspace="300" vspace="200" align="middle">各祝鱼油，鸡年大吉(J)～</marquee>

复制代码

滚动的方式

alternate：表示在两端之间来回滚动。

scroll：表示由一端滚动到另一端，会重复。

slide：表示由一端滚动到另一端，不会重复。

注意啊！

左右滚动

上下就不行了！

<marquee bgcolor="#FF3333" scrollamount="8" direction="down" align="middle" behavior="alternate">各祝鱼油，鸡年大吉(J)～</marquee>

复制代码

<marquee bgcolor="#FF3333" scrollamount="8" direction="left" behavior="alternate">各祝鱼油，鸡年大吉(J)～</marquee>

复制代码

人机交互

移出

<marquee bgcolor="#FF3333" scrollamount="8" direction="left" behavior="alternate" onMouseOut="this.start()" onMouseOver="this.stop()">各祝鱼油，鸡年大吉(J)～</marquee>

复制代码

广告超链接

广告跑马灯

<marquee bgcolor="FF3333" direction="right" behavior="alternate" scrollamount="15"><a href=http://bbs.fishc.com/forum-337-1.html>欢迎来到小天才养殖场</a></marquee>

复制代码

这位鱼油，如果喜欢本系列HTML帖子，请订阅专辑☞（传送门）（不喜欢更要订阅

）

shishunfu · 发表于 2017-4-25 15:28:33

交作业

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
span {
font-size: 18px;
color: white;
font-family: sans-serif;
font-weight: bold;
}
a{
font-size: 22px;
color: white;
border:1px solid white;
border-radius: 2px;
background-color: aqua;
padding: 10px;
margin: 20px;
text-decoration: none;
}
</style>
</head>
<body>
<marquee scrollamount="8" bgcolor="red" direction="left" height="30" align="middle" behavior="alternate" >
各祝鱼油，鸡年大吉(J)～
</marquee>
<marquee scrollamount="10" bgcolor="red" direction="right" height="30" align="middle" behavior="alternate" >
<a id="a2" href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539">欢迎来到不二老哥的HTML5-庖丁解牛</a>
</marquee>
</body>
</html>

复制代码

n9vakin · 发表于 2017-1-22 11:13:50

简单易懂,感谢楼主~

不二如是 · 发表于 2017-1-22 15:05:50

n9vakin 发表于 2017-1-22 11:13
简单易懂,感谢楼主~

谢谢支持～

tttb · 发表于 2017-1-22 20:27:23

这个可以用js做出来的

joker11111 · 发表于 2017-3-5 21:43:05

get截动图技能

另纠错：

不二如是 · 发表于 2017-3-6 09:11:23

joker11111 发表于 2017-3-5 21:43
get截动图技能

棒棒哒～

hwx8777115 · 发表于 2017-5-11 00:15:09

为什么从右侧滚动到左侧就停止了呢，必须鼠标点击一下才会继续向右滚动。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<marquee bgcolor="#FF3333" scrollamount="15" direction="left" align="middle" behavior="alternate">
二季度表彰会！！
</marquee>
<marquee bgcolor="FF3333" direction="left" behavior="alternate" scrollamount="15">
<a href=http://bbs.fishc.com/forum-337-1.html>欢迎来到小天才养殖场</a></marquee>
</body>
</html>

复制代码

18813034116 · 发表于 2017-5-21 21:35:03

hwx8777115 发表于 2017-5-11 00:15
为什么从右侧滚动到左侧就停止了呢，必须鼠标点击一下才会继续向右滚动。

我用谷歌、火狐和IE浏览器都试了一下你的代码，都没有停

likesunshine · 发表于 2018-3-21 20:50:14

点赞，支持

huguer · 发表于 2018-4-18 21:05:11

align属性值无法生效，老师能否解决一下？

船到桥头自然沉 · 发表于 2018-9-10 13:06:31

同问题啊

枫丹白露666 · 发表于 2018-10-20 21:45:07

<marquee bgcolor="FF3333" direction="right" behavior="alternate" scrollamount="15"><a href=http://bbs.fishc.com/forum-337-1.html>欢迎来到小天才养殖场</a></marquee>
上面红色的代码是什么意思

soulwyb · 发表于 2018-10-21 08:07:47

<html>
<head>
<meta charset="utf-8">
<title>tips1</title>
</head>
<body>
<marquee bgcolor="#f33" scrollamount="2500" scrolldelay="2000" hspace="300" vspace="200" behavior="alternate">
祝鱼油，X年大吉
</marquee>
<marquee bgcolor="#f33" direction="right" behavior="alternate" scrollamount="15">
<a href=http://bbs.fishc.com/forum-337-1.html>
欢迎来到小天才养殖场
</a>
</marquee>
</body>
</html>

复制代码

这个标签在W3C的HTML中属于废弃的标签所以楼上各位不用太纠结玩一遍就过了就好

克里斯保罗 · 发表于 2019-8-15 22:12:43

交作业！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>list</title>
</head>
<body>
<marquee bgcolor="#FF3333" scrollamount='12'
align='middle'
behavior ='alternate'>
走马灯，让我来试试
</marquee>
<marquee bgcolor='#FF3333' scrollamount='8' direction='left'
behavior='alternate' onMouseOut='this.start()' onMouseOver='this.stop()'>
<a href="https://www.bilibili.com">bilibili</a>
</marquee>
</body>
</html>

复制代码

小脑斧 · 发表于 2020-3-11 13:52:19

登录/注册后可看大图

huanghuiyv · 发表于 2020-8-19 09:48:50

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title></title>
</head>

<body>
<marquee bgcolor="#FF3333" scrollamount="20" direction="left" behavior="alternate" onMouseOut="this.start()" onMouseOver="this.stop()">
各祝鱼油，鸡年大吉(J)～
</marquee>
<marquee bgcolor="FF3333" direction="right" behavior="alternate" scrollamount="15" onMouseOut="this.start()" onMouseOver="this.stop()">
<a href=http://bbs.fishc.com/forum-337-1.html>欢迎来到小天才养殖场</a>
</marquee>
</body>

</html>

琅琊王朝 · 发表于 2023-4-25 21:41:34

真是太牛逼啦！

账号		自动登录	找回密码
密码			立即注册

[奇技淫巧] 年庆版 #鱼C跑马灯 |【欢脱春节】

马上注册，结交更多好友，享用更多功能^_^

评分

点评

浏览过的版块