弹幕效果的实现

8人阅读 评论(0) 收藏 举报
分类:

会移动的文字(Marquee)

http://www.jb51.net/shouce/html/HTML/marquee.html


+ 基本语法

<marquee> ... </marquee>

<marquee>啦啦啦,我会移动耶!</marquee>

啦啦啦,我会移动耶!

+文字移动属性的设置

方向 <direction=#> #=left, right

<marquee direction=left>啦啦啦,我从右向左移!</marquee> <P><marquee direction=right>啦啦啦,我从左向右移!</marquee>

啦啦啦,我从右向左移!

啦啦啦,我从左向右移!

方式 <bihavior=#> #=scroll, slide, alternate

<marquee behavior=scroll>啦啦啦,我一圈一圈绕着走!</marquee> <P>
<marquee behavior=slide>啦啦啦,我只走一次就歇了!</marquee> <P>
<marquee behavior=alternate>啦啦啦,我来回走耶!</marquee>

啦啦啦,我一圈一圈绕着走!

啦啦啦,我只走一次就歇了!

啦啦啦,我来回走耶!

循环 <loop=#> #=次数;若未指定则循环不止(infinite)

<marquee loop=3 width=50% behavior=scroll>啦啦啦,我只走 3 趟哟!</marquee> <P><marquee loop=3 width=50% behavior=slide>啦啦啦,我只走 3 趟哟!</marquee> <P><marquee loop=3 width=50% behavior=alternate>啦啦啦,我只走 3 趟哟!</marquee>

啦啦啦,我只走 3 趟哟!

啦啦啦,我只走 3 趟哟!

啦啦啦,我只走 3 趟哟!

速度 <scrollamount=#>

<marquee scrollamount=20>啦啦啦,我走得好快哟!</marquee>

啦啦啦,我走得好快哟!

延时 <scrolldelay=#>

<marquee scrolldelay=500 scrollamount=100>啦啦啦,我走一步,停一停!</marquee>

啦啦啦,我走一步,停一停!

+ 外观(Layout)设置

对齐方式(Align) <align=#> #=top, middle, bottom

<font size=6>
<marquee align=# width=400>啦啦啦,我会移动耶!</marquee>
</font>
对齐上沿、中间、下沿。

啦啦啦,我会移动耶! 对齐上沿。

啦啦啦,我会移动耶! 对齐中间。

啦啦啦,我会移动耶! 对齐下沿。

底色 <bgcolor=#>

#=rrggbb 16 进制数码,或者是下列预定义色彩:BlackOliveTealRedBlueMaroonNavyGrayLimeFuchsiaWhiteGreenPurpleSilverYellowAqua
<marquee bgcolor=aaaaee>啦啦啦,我会移动耶!</marquee>

啦啦啦,我会移动耶!

面积 <height=# width=#>

<marquee height=40 width=50% bgcolor=aaeeaa>
啦啦啦,我会移动耶!
</marquee>

啦啦啦,我会移动耶!

空白(Margins)<hspace=# vspace=#>

********************************************<br>
嗨,
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>啦啦啦,我会移动耶!</marquee>
大家好!<br>
********************************************

********************************************
嗨, 啦啦啦,我会移动耶! 大家好!
********************************************

查看评论

简单实现弹幕效果

首先分析一下,他是由三层布局来共同完成的,第一层视频布局,第二层字幕布局,第三层输入框布局,要想让这三个布局在同一页面上,必须用相对布局或帧布局。 ...
  • qq_40441190
  • qq_40441190
  • 2017-11-13 13:00:16
  • 214

JQ实现简单的弹幕效果

*{                 margin: 0;                 padding: 0;             }             #box{      ...
  • qq_36369717
  • qq_36369717
  • 2016-11-16 18:19:19
  • 1653

Javascript实现的一个简单的弹幕效果-入门版

思路如下: 依据web的三层架构搭建好页面 处理页面逻辑 一.基本结构的搭建 我需要的样式如上图:所以我的基本结构也就明确下来了 1.html结构骨架 ...
  • Luckytao09
  • Luckytao09
  • 2017-09-12 23:46:22
  • 566

弹幕效果实现

前言昨天晚上11点了还没睡着,惆怅能力不足,但不知道怎么能快速的提升自己。呜呼哀哉,临睡前看了一个弹幕的效果实现的技术视频,听着很好的,自己在做电商这块也没写过弹幕。今天来到公司趁着闲暇按照人家说的思...
  • github_30943901
  • github_30943901
  • 2016-08-04 19:08:45
  • 1029

Android知识回顾之弹幕效果的实现

android 知识回顾
  • forshareit
  • forshareit
  • 2017-04-09 18:24:13
  • 449

Android实现弹幕效果

相信大家看视频的时候都会有弹幕效果,这似乎已经成为视频软件的标配,接下来让我们来看看如何实现这个弹幕效果。 一.弹幕效果分析 我可以看到,弹幕效果是在屏幕上方飘过,...
  • m0_37136295
  • m0_37136295
  • 2017-05-18 15:44:11
  • 1424

Jquery实现弹幕效果

用jquery写了一个弹幕的小功能,供大家参考学习。 前端显示 吐槽: 发射 ...
  • shoushou71
  • shoushou71
  • 2016-08-16 22:21:02
  • 1447

前端案例--简易弹幕效果

简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失。 涉及知识点:val()、random()、height()、css()、append()、remove()等,主要是元素的操作...
  • macanfa
  • macanfa
  • 2016-05-19 00:56:58
  • 1874

简易弹幕效果实现

  • 2015年08月14日 15:12
  • 835KB
  • 下载
    个人资料
    持之以恒
    等级:
    访问量: 391
    积分: 548
    排名: 9万+
    文章存档
    最新评论