播放个视频的时候看到很有趣的弹幕，想着前端能不能做个弹幕效果。弹幕是滚动的，所以首先想到了<marquee>标签。但事实上，<marquee>标签不是w3c的标准，只是主流的浏览器都支持。

　　这么做的一个考虑是，<marquee>标签可以实现js的动画效果，也就简单一点。闲话不叙了，贴上代码：引入了百度的jquery cdn加速，所以代码不需要任何修改就可以跑起来。

　　

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>无标题文档</title>
  6.     <style>
  7.         section{height:300px;width:800px;border:1px solid #930;}
  8.         .div0{width:800px;position:relative;border: 1px solid #C39}
  9.         .div1{width:800px;}
  10.         .div2{width:800px;position:absolute;left:0;top:20px;z-index:5}
  11.         marquee{width:800px;}
  12.     </style>
  13. </head>
  14.  
  15. <body>
  16. <section>
  17.     <h1>自己写的最简单的循环弹幕，利用marquee标签</h1>
  18. </section>
  19. <div class="div0">
  20.     <div class="div1">
  21.         webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
  22.         我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情，这块我们后续会提到。
  23.         你可以不打算将其用在你的项目上，但没有理由不去掌握它，因为以近期 Github 上各大主流的（React相关）项目来说，它们仓库上所展示的示例已经是基于 webpack 来开发的，比如 React-Boostrap 和 Redux。
  24.     </div>
  25.     <div class ="div2">
  26.     </div>
  27. </div>
  28. <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
  29. <script>
  30.     $(document).ready(function() {
  31.         //tanmu函数,参数说明.content:弹幕内容;fontcolor:弹幕颜色;speed:运动速度，单位为px/s（每秒运动多少像素）;startTime:开始的时间，单位为毫秒;
  32.         function tanmu(content, fontColor, speed, startTime) {
  33.             function add(content, speed) {
  34.                 var html = "";
  35.                 html += "<marquee   scrolldelay='1000' direction='left' scrollamount='" + speed + "' style='color:" + fontColor + "'>" + content + "</marquee>";
  36.                 $(".div2").append(html);
  37.             }
  38.  
  39.             setTimeout(add(content, speed), startTime);
  40.             //调用弹幕函数
  41.         }
  42.         tanmu("我来了1,我来了1,我来了1,我来了1,我来了1,","#f00",90,0);
  43.         tanmu("我来了2,我来了2,我来了2,我来了2,我来了2,","#0f0",100,1000);
  44.         tanmu("我来了3,我来了3,我来了3,我来了3,我来了3,","#00f",150,2000);
  45.         tanmu("我来了4,我来了4,我来了4,我来了4,我来了4,","#930",130,2500);
  46.     })
  47.  
  48. </script>
  49. </body>
  50. </html>

　　

调用了setTimeout，所以会循环播放。

　　

　　

marquee标签弹幕效果的更多相关文章

  1. 借助marquee实现弹幕效果

    HTML标签marquee实现滚动效果 .基于此,实现简易版 弹幕:  HTML <div class="right_liuyan"> <marquee id=& ...

  2. marquee标签滚动效果

    <marquee></marquee>标签,默认从最右侧往左滚动: direction:设置滚动的方向: height:设置标签高度, width:设置标签宽度: behavi ...

  3. JS魔法堂：通过marquee标签实现信息滚动效果

    一.前言   有限的空间展现无限的内容,这是滚动最常用到的地方.根据信息滚动效果我们可以有很多的实现方式,但HTML自带的 marquee标签 是其中一个较简单的实现方式.下面记录一下,供日后查阅. ...

  4. html标签marquee实现走马灯效果（文字浮动）

    marquee标签实现文字或图片的移动效果 <marquee direction = "right">文字<marquee>

  5. html模板实现银幕滚动效果<marquee>标签使用

    该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果该标签是个容器标签语法: <marquee ...

  6. marquee 标签的鼠标放上去滚动效果 鼠标离开继续滚动

    效果很实用,可以轻松的实现鼠标放上去停止滚动.鼠标离开继续滚动的效果.下面是具体的用法(特别注意onMouseOver和onMouseOut是需要同时写进去才会出现比较好的效果):onMouseOut ...

  7. marquee标签跑马灯连续无空白播放效果 纯CSS（chrome opera有效）

    marquee似乎没有设置首尾相连播放的属性,内容滚动时总会留出一段marquee本身长度的空隙,某些情况下很不方便: 捣鼓了一会,得出一种解决办法,关键有两点: 1.将需要滚动的内容复制一份于同一行 ...

  8. marquee标签实现跑马灯效果--无缝滚动

    今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果.但无意中发现了一个html标签——<marquee> ...

  9. 文字滚动效果，jquery和marquee标签

    链接:https://pan.baidu.com/s/1pMwHYH1 密码:r9ys marquee标签是微软创建的,后来大部分浏览器都适用后,微软在IE8把这个标签去掉了.为符合W3C规范,还是使 ...

随机推荐

  1. sicily 10330. Cutting Sausages

    #include<stdio.h> int main() {    int n,m,j,k;    while(scanf("%d%d",&n,&m)! ...

  2. pandas中选取某行为缺失值的数据，并返回

    1.df.dropna() 可以返回去掉NaN的df结果集. 2.pandas中dataframe取差集: df=pd.DataFrame({"name":[1,2,3,np.Na ...

  3. GPS时间系统概述和世界时系统

    6．1  GPS时间系统概述 时间包含"时刻"和"时间间隔"2个概念.所谓时刻,即发生某一现象的瞬间.在天文学和卫星定位中.与所获数据对应的时刻也称为历元.时间 ...

  4. 开源GIS软件 3

    OpenWLANMap 与 OpenStreetMap 项目类似,OpenWLANMap 将变成一个开源的替代产品,提供 WLANs 的数据库.定位信息等. 开源排水管网GIS系统 udpnGIS 邢 ...

  5. CF #329 D

    D题,LCA是很明显的.要注意的是,因为是除法,所以最多可以除x>2的有64次,当大于64时可以直接返回0.而且注意到可能会有很多值为1的边,可以使用路径压缩,把边为1的边压缩掉,类似于并查集的 ...

  6. java 基础编程day1

    public class TextCharType{ public static void(Sting[] args){ char c1 = 'a'; char c2 = '了'; System.ou ...

  7. python 003 os模块 example

    import os for tmpdir in ('/tmp',r'C:/Users/Administrator/PycharmProjects/'): if os.path.isdir(tmpdir ...

  8. crm使用soap启用和停用记录

    function demo() {     //操作记录的id     var targetId = "a8a46444-ba10-e411-8a04-00155d002f02"; ...

  9. Delphi7中单元文件内各个部分的执行顺序

    注:本文主要是讨论delphi程序启动时和退出时的执行顺序,期间有些知识来源于Delphi帮助,有些来自<Delphi7程序设计教程>(这本书只告诉我有initialization 和 f ...

  10. uboot向内核模块传递参数的方法

    1 模块参数 定义模块参数 1 module_param(name, type, perm); 定义一个模块参数, name 变量名 type 数据类型 bool:布尔型 invbool:一个布尔型( ...