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

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

　　

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>无标题文档</title>

    <style>

        section{height:300px;width:800px;border:1px solid #930;}

        .div0{width:800px;position:relative;border: 1px solid #C39}

        .div1{width:800px;}

        .div2{width:800px;position:absolute;left:0;top:20px;z-index:5}

        marquee{width:800px;}

    </style>

</head>

<body>

<section>

    <h1>自己写的最简单的循环弹幕，利用marquee标签</h1>

</section>

<div class="div0">

    <div class="div1">

        webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

        我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情，这块我们后续会提到。

        你可以不打算将其用在你的项目上，但没有理由不去掌握它，因为以近期 Github 上各大主流的（React相关）项目来说，它们仓库上所展示的示例已经是基于 webpack 来开发的，比如 React-Boostrap 和 Redux。

    </div>

    <div class ="div2">

    </div>

</div>

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>

<script>

    $(document).ready(function() {

        //tanmu函数,参数说明.content:弹幕内容;fontcolor:弹幕颜色;speed:运动速度，单位为px/s（每秒运动多少像素）;startTime:开始的时间，单位为毫秒;

        function tanmu(content, fontColor, speed, startTime) {

            function add(content, speed) {

                var html = "";

                html += "<marquee   scrolldelay='1000' direction='left' scrollamount='" + speed + "' style='color:" + fontColor + "'>" + content + "</marquee>";

                $(".div2").append(html);

            }

            setTimeout(add(content, speed), startTime);

            //调用弹幕函数

        }

        tanmu("我来了1,我来了1,我来了1,我来了1,我来了1,","#f00",90,0);

        tanmu("我来了2,我来了2,我来了2,我来了2,我来了2,","#0f0",100,1000);

        tanmu("我来了3,我来了3,我来了3,我来了3,我来了3,","#00f",150,2000);

        tanmu("我来了4,我来了4,我来了4,我来了4,我来了4,","#930",130,2500);

    })

</script>

</body>

</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. mongodb之用户/认证/角色/权限管理

    前言 用户权限管理很重要,只给需要的权限,防止应用系统漏洞导致脱库 认证和授权 Authentication 认证识别,解决我是谁 Authorization 操作授权,我能做什么 认证机制 MONG ...

  2. django 和 mysql的一次troubleshooting

    下面是一次用django连接mysql的经历,记录下来也许以后会有帮助. 首先是用django的./manage.py syncdb 去连接mysql -bash-3.2$ ./manage.py s ...

  3. UIView 的图层关系

    个人认为用字母取代这样的比較好理解,.给新人学习 addSubview是一层一层往上加,新加的仅仅能放到父视图的最上层, insertSubView能够控制它加入到父视图的哪一层  A addSubv ...

  4. web端log4net输出错误日志到mysql

    1.引用log4net 2.配置log4net.config文件 <?xml version="1.0" encoding="utf-8" ?> & ...

  5. Oracle学习（12）：存储过程，函数和触发器

    存储过程和存储函数 l存储在数据库中供全部用户程序调用的子程序叫存储过程.存储函数. 注意:存储过程与存储函数声明变量时,用的是as   而不是declare 存储过程与存储函数差别 存储过程不带有返 ...

  6. CAS 4.0 配置开发手冊

    1    下载 地址http://downloads.jasig.org/ cas-server-4.0.0-release.tar.gz cas-client-3.3.3-release.tar.g ...

  7. velocity简单样例

    velocity简单样例整体实现须要三个步骤,详细例如以下: 1.创建一个Javaproject 2.导入须要的jar包 3.创建须要的文件 ============================= ...

  8. velocity.js 中文文档 (教程)

    velocity.js 是一个简单易用.高性能.功能丰富的轻量级JS动画库.它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用. Vel ...

  9. Uboot中支持lcd和hdmi显示不同的logo图片【转】

    本文转载自:http://blog.csdn.net/u010865783/article/details/54953315 在lcd为竖屏,hdmi显示横屏的情况下,如果按照默认的uboot显示框架 ...

  10. 使用poi读取word2007(.docx)中的复杂表格

    使用poi读取word2007(.docx)中的复杂表格 最近工作需要做一个读取word(.docx)中的表格,并以html形式输出.经过上网查询,使用了poi. 对于2007及之后的word文档,需 ...