播放个视频的时候看到很有趣的弹幕，想着前端能不能做个弹幕效果。弹幕是滚动的，所以首先想到了<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. mysql :=和=的区别

    :=和=的区别 = 只有在set和update时才是和:=一样,赋值的作用,其它都是等于的作用.鉴于此,用变量实现行号时,必须用:= := 不只在set和update时时赋值的作用,在select也是 ...

  2. windows与linux下配置ant

    转自:http://www.cnblogs.com/wuxinrui/archive/2012/01/06/2314392.html 1.下载:到ANT官方网站http://ant.apache.or ...

  3. Openfire：通过Servlet群发消息

    在Openfire中自带有Broadcase插件,可以让我们群发消息给全部用户或者组.不过如果是我们通过Servlet来实现这一功能,那么是能够增加一定的灵活性的.具体做法直接看Demo代码: pub ...

  4. FFmpeg基础库编程开发学习笔记——音频常见格式及字幕格式

    声明一下:这些关于ffmpeg的文章仅仅是用于记录我的学习历程和以便于以后查阅,文章中的一些文字可能是直接摘自于其它文章.书籍或者文献,学习ffmpeg相关知识是为了使用在Android上,我也才是刚 ...

  5. 高仿QQ6.0之側滑删除

    前两天已经完毕了高仿QQ6.0側滑和优化,今天来看下側滑删除的实现吧,假设有兴趣,能够去看下之前的两篇,仿QQ6.0側滑之ViewDragHelper的使用(一)和高仿QQ6.0側滑菜单之滑动优化(二 ...

  6. 如何更改iTunes备份地址（修改iphone ipad 备份地址） itunes文件目录修改方法 【亲测有效，附带原理说明】

    前言 C盘空间有限,但是iTunes就是那么龌龊,只能把手机备份存到C盘.那么怎么才能把备份文件存到其他分区的文件夹里面呢? 当时我想先看看度娘,看看有没有现成的! 结果 nnd!! 我看了一大堆相关 ...

  7. SpringMVC中的 --- 异常处理

    系统异常处理器SimpleMappingExceptionResolver 处理器方法执行过程中,可能会发生异常,不想看到错误黄页,想看到一个友好的错误提示页. 自定义异常处理器 使用异常处理注解

  8. sharepoint类型转换

    sharepoint学习汇总 http://blog.csdn.net/qq873113580/article/details/20390149 r[col.ColumnName] = GetType ...

  9. [C++设计模式] composite 组合模式

    组合(Composite)模式的其他翻译名称也非常多,比方合成模式.树模式等等.在<设计模式>一书中给出的定义是:将对象以树形结构组织起来,以达成"部分-总体"的层次结 ...

  10. Codeforces--630D--Hexagons（规律）

     D - Hexagons! Crawling in process... Crawling failed Time Limit:500MS     Memory Limit:65536KB    ...