播放个视频的时候看到很有趣的弹幕，想着前端能不能做个弹幕效果。弹幕是滚动的，所以首先想到了<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. 利用Date类计算生活时间

    今天学习到了Date类还有其他一些常用类! 这里就简单使用Date及其一些方法计算生活时间. import java.text.ParseException; import java.text.Sim ...

  2. Spring MVC-表单（Form）标签-文件上传（File Upload）示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_upload.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显 ...

  3. posix线程库1

    posix线程库重要的程度不言而喻,这些天学习这个,参考 https://www.ibm.com/developerworks/cn/linux/thread/posix_thread1/   首先先 ...

  4. Two Heads Are Often Better Than One

    Two Heads Are Often Better Than One Adrian Wible PROGRAMMING REQUIRES DEEP THOUGHT, and deep thought ...

  5. poj 1080 Human Gene Functions (最长公共子序列变形)

    题意:有两个代表基因序列的字符串s1和s2,在两个基因序列中通过添加"-"来使得两个序列等长:其中每对基因匹配时会形成题中图片所示匹配值,求所能得到的总的最大匹配值. 题解:这题运 ...

  6. Homebrew 命令

    安装(需要 Ruby):ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)" 搜索 ...

  7. C++常用字符串分割方法实例汇总

    投稿:shichen2014 字体:[增加 减小] 类型:转载 时间:2014-10-08我要评论 这篇文章主要介绍了C++常用字符串分割方法实例汇总,包括了strtok函数.STL.Boost等常用 ...

  8. 摄像头ov2685中关于sensor id 设置的相关的寄存器地址【转】

    本文转载自:http://blog.csdn.net/morixinguan/article/details/51220992 OV2685 : CHIP_ID address : 0x300A   ...

  9. hdu 2063 （二分匹配 匈牙利算法)

    过山车 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  10. 90.商城登录页面Extjs

    1. Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = "Ext/resources/images/default/s.gif"; Ext ...