鱼C论坛

 找回密码
 立即注册
查看: 3673|回复: 18

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

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

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

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

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

何为跑马灯

解释太麻烦,接Gif~
1.gif


没错,没想到如此高大上的名字(也没高大上到哪里

就是marquee!,跑马灯。

只有一个标签:
  1. <marquee></marquee>
复制代码


但是,却有10+个属性值!

先看下,最纯粹的跑马灯代码;
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6. </head>
  7. <body>
  8. <marquee ><font size="15" color="#00FFFF">各祝鱼油,鸡年大吉(J)~</font></marquee>
  9. </body>
  10. </html>
复制代码


<font>,是修改字体的,不用我多说了吧。

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


  • 背景色


  • marquee中,用bgcolor来修改背景色。
    1. <marquee bgcolor="#FF3333"><font size="15" color="#FFF">各祝鱼油,鸡年大吉(J)~</font></marquee>
    复制代码

    效果图;
    Snip20170122_248.png


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


  • 滚动速度


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

    单位是pixels,就是像素/s。
    1. <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,从左向右
    1. <marquee bgcolor="#FF3333" scrollamount="8" direction="down"><font size="15" color="#FFF">各祝鱼油,鸡年大吉(J)~</font></marquee>
    复制代码

    效果图:
    1.gif


  • 滚动背景高、宽度


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


    设置为,宽度666px,高度888px:
    1. <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,所以就是和界面边框的距离。

    这样就能让滚动区域,显示在屏幕中间了:
    1. <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就可以设置为中间了:
    1. <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方式,只支持左右滚动

    上下就不行了!
    1. <marquee bgcolor="#FF3333" scrollamount="8" direction="down"   align="middle" behavior="alternate"><font size="15" color="#FFF">各祝鱼油,鸡年大吉(J)~</font></marquee>
    复制代码

    效果图,就傻傻的呆在那里了:
    Snip20170122_256.png


    修改代码,删掉居中,宽高属性:
    1. <marquee bgcolor="#FF3333" scrollamount="8" direction="left"   behavior="alternate"><font size="15" color="#FFF">各祝鱼油,鸡年大吉(J)~</font></marquee>
    复制代码

    效果图:
    1.gif



  • 人机交互


  • onMouseOut=this.start() 或者this.stop() :用来设置鼠标移出该区域时继续/停止滚动

    设置鼠标移出开始、移入停止。

    1. <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


  • 广告超链接


  • 没猜错,这是一个广告跑马灯
    1. <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
回复

使用道具 举报

发表于 2017-4-25 15:28:33 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>Title</title>
  6.         <style type="text/css">
  7.                 span {
  8.                         font-size: 18px;
  9.                         color: white;
  10.                         font-family: sans-serif;
  11.                         font-weight: bold;
  12.                 }
  13.                 a{
  14.                         font-size: 22px;
  15.                         color: white;
  16.                         border:1px solid white;
  17.                         border-radius: 2px;
  18.                         background-color: aqua;
  19.                         padding: 10px;
  20.                         margin: 20px;
  21.                         text-decoration: none;
  22.                 }
  23.         </style>
  24. </head>
  25. <body>
  26. <marquee scrollamount="8" bgcolor="red" direction="left" height="30"   align="middle" behavior="alternate" >
  27.         <span>各祝鱼油,鸡年大吉(J)~</span>       
  28. </marquee>
  29. <marquee scrollamount="10" bgcolor="red" direction="right" height="30"   align="middle" behavior="alternate" >
  30.         <a id="a2" href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539">欢迎来到不二老哥的HTML5-庖丁解牛</a>
  31. </marquee>
  32. </body>
  33. </html>
复制代码

点评

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

使用道具 举报

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

使用道具 举报

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

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

使用道具 举报

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

使用道具 举报

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

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

使用道具 举报

 楼主| 发表于 2017-3-6 09:11:23 | 显示全部楼层

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

使用道具 举报

发表于 2017-5-11 00:15:09 | 显示全部楼层
为什么从右侧滚动到左侧就停止了呢,必须鼠标点击一下才会继续向右滚动。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6. </head>
  7. <body>
  8. <marquee bgcolor="#FF3333" scrollamount="15" direction="left" align="middle" behavior="alternate">
  9.         <font size="15" color="#00FFFF">二季度表彰会!!
  10.         </font></marquee>
  11. <marquee bgcolor="FF3333" direction="left" behavior="alternate" scrollamount="15">
  12.         <a href=http://bbs.fishc.com/forum-337-1.html><font face="fantasy" color=#00FF00 size=6><STRONG>欢迎来到小天才养殖场</a></marquee>
  13. </body>
  14. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

发表于 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
回复 支持 反对

使用道具 举报

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

  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>tips1</title>

  5. </head>

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

  19. </html>
复制代码


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

使用道具 举报

发表于 2019-8-15 22:12:43 | 显示全部楼层
交作业!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>list</title>
  6. </head>
  7. <body>
  8.         <marquee bgcolor="#FF3333" scrollamount='12'
  9.         align='middle'
  10.         behavior ='alternate'>
  11.         <font size="15" color="#FFF">走马灯,让我来试试</font>
  12.         </marquee>
  13.         <marquee bgcolor='#FF3333' scrollamount='8' direction='left'
  14.         behavior='alternate' onMouseOut='this.start()' onMouseOver='this.stop()'>
  15.                 <a href="https://www.bilibili.com"><font size="15" color="#FFF">bilibili</font></a>
  16.         </marquee>
  17. </body>
  18. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

                               
登录/注册后可看大图

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

使用道具 举报

发表于 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
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-3-29 16:10

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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