设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › Web密训营 › 年庆版 #鱼C跑马灯 |【欢脱春节】
返回列表 发新帖
查看: 4106|回复: 18

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

[复制链接]
不二如是
发表于 2017-1-22 10:27:52 | 显示全部楼层 |阅读模式

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

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

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

何为跑马灯？

解释太麻烦，接Gif～
1.gif


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

就是marquee！，跑马灯。

只有一个标签：
<marquee></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>
    ：
    效果图；
    Snip20170122_248.png


    是不是一下就很有节日气氛啦～


  • 滚动速度


    • scrollamount，用来设置字幕滚动速度，默认值是6，实在是有些慢。

    单位是pixels，就是像素/s。
    <marquee bgcolor="#FF3333" scrollamount="8"><font size="15" color="#FFF">各祝鱼油，鸡年大吉(J)～</font></marquee>
    效果图
    1.gif

    建议速度，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>
    效果图：
    1.gif


  • 滚动背景高、宽度


    • 默认height，高度为100px
    Snip20170122_251.png


    设置为，宽度666px，高度888px：
    <marquee bgcolor="#FF3333" scrollamount="8" direction="down" height="888" width="666"><font size="15" color="#FFF">各祝鱼油，鸡年大吉(J)～</font></marquee>
    效果图：
    Snip20170122_253.png


  • 距离父级窗口的高、宽度


    • 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>
    效果图：
    Snip20170122_254.png


  • 字体居中


    • 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>
    效果图：
    1.gif



  • 滚动的方式


    • 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>
    效果图，就傻傻的呆在那里了：
    Snip20170122_256.png


    修改代码，删掉居中，宽高属性：
    <marquee bgcolor="#FF3333" scrollamount="8" direction="left"   behavior="alternate"><font size="15" color="#FFF">各祝鱼油，鸡年大吉(J)～</font></marquee>
    效果图：
    1.gif



  • 人机交互


    • 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>
    效果图：
    1.gif


  • 广告超链接


    • 没猜错，这是一个广告跑马灯 
    <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>
    效果图：
    1.gif






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

评分

参与人数 5荣誉 +18 鱼币 +23 贡献 +15 收起 理由
542624047 + 5 + 5 + 3 鱼C有你更精彩^_^
睦ちゃん她爹 + 3 感谢楼主无私奉献！
type_J + 5 + 5 + 2 感谢楼主无私奉献！
拈花小仙 + 8 + 8 + 5 排版真好哦，易懂`
alltolove + 5 + 2 感谢楼主无私奉献！

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

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" >
        <span>各祝鱼油，鸡年大吉(J)～</span>        
</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>

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2017-5-11 05:42
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

n9vakin
发表于 2017-1-22 11:13:50 | 显示全部楼层
简单易懂,感谢楼主~
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
 楼主| 发表于 2017-1-22 15:05:50 | 显示全部楼层
n9vakin 发表于 2017-1-22 11:13
简单易懂,感谢楼主~

谢谢支持～
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

tttb
发表于 2017-1-22 20:27:23 | 显示全部楼层
这个可以用js做出来的
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

joker11111
发表于 2017-3-5 21:43:05 | 显示全部楼层
get截动图技能
11111111111.gif

另纠错：
22222222222222222222.png
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
 楼主| 发表于 2017-3-6 09:11:23 | 显示全部楼层
joker11111 发表于 2017-3-5 21:43
get截动图技能

棒棒哒～
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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">
        <font size="15" color="#00FFFF">二季度表彰会！！
        </font></marquee>
<marquee bgcolor="FF3333" direction="left" behavior="alternate" scrollamount="15">
        <a href=http://bbs.fishc.com/forum-337-1.html><font face="fantasy" color=#00FF00 size=6><STRONG>欢迎来到小天才养殖场</a></marquee>
</body>
</html>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

18813034116
发表于 2017-5-21 21:35:03 | 显示全部楼层
hwx8777115 发表于 2017-5-11 00:15
为什么从右侧滚动到左侧就停止了呢，必须鼠标点击一下才会继续向右滚动。

我用谷歌、火狐和IE浏览器都试了一下你的代码，都没有停
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

likesunshine
发表于 2018-3-21 20:50:14 | 显示全部楼层
点赞，支持
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

huguer
发表于 2018-4-18 21:05:11 | 显示全部楼层
align属性值无法生效，老师能否解决一下？
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

船到桥头自然沉
发表于 2018-9-10 13:06:31 | 显示全部楼层
同问题啊
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

枫丹白露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><font face="fantasy" color=#00FF00 size=6><STRONG>欢迎来到小天才养殖场</a></marquee>
上面红色的代码是什么意思
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

soulwyb
发表于 2018-10-21 08:07:47 | 显示全部楼层 
<html>

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

</head>

<body>
    <!-- height="888px" width="666px" align="center"  direction="down"-->
    <marquee bgcolor="#f33" scrollamount="2500" scrolldelay="2000" hspace="300" vspace="200" behavior="alternate">
        <font size='15' color="#0ff" onMouseOver="this.stop()" onMouseOut="this.start()">祝鱼油，X年大吉</font>
    </marquee>
    <marquee bgcolor="#f33" direction="right" behavior="alternate" scrollamount="15">
        <a href=http://bbs.fishc.com/forum-337-1.html>
            <font face="fantasy" color="#0f0" size=6>
                <STRONG>欢迎来到小天才养殖场</STRONG>
            </font>
        </a>
    </marquee>
</body>

</html>

这个标签在W3C的HTML中属于废弃的标签 所以楼上各位不用太纠结 玩一遍就过了就好
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

克里斯保罗
发表于 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'>
        <font size="15" color="#FFF">走马灯，让我来试试</font>
        </marquee>
        <marquee bgcolor='#FF3333' scrollamount='8' direction='left' 
        behavior='alternate' onMouseOut='this.start()' onMouseOver='this.stop()'>
                <a href="https://www.bilibili.com"><font size="15" color="#FFF">bilibili</font></a>
        </marquee>
</body>
</html>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小脑斧
发表于 2020-3-11 13:52:19 | 显示全部楼层

                               
登录/注册后可看大图

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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()">
        <font size="15" color="#00FFFF">各祝鱼油，鸡年大吉(J)～</font>
    </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><font face="fantasy" color=#00FF00 size=6><STRONG>欢迎来到小天才养殖场</a>
    </marquee>
</body>

</html>
Snipaste_2020-08-15_13-44-34.png
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

琅琊王朝
发表于 2023-4-25 21:41:34 | 显示全部楼层
真是太牛逼啦！
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-22 02:53

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表