播放个视频的时候看到很有趣的弹幕，想着前端能不能做个弹幕效果。弹幕是滚动的，所以首先想到了<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. 球的序列(formation.*)

      N个编号为1-n的球,每个球都有唯一的编号.这些球被排成两种序列,分别为A.B序列,现在需要重新寻找一个球的序列l,对于这个子序列l中任意的两个球,要求j,k(j<k),都要求满足lj在A中 ...

  2. nyoj_71_独木舟上的旅行_201312122051

    独木舟上的旅行 时间限制:3000 ms  |           内存限制:65535 KB 难度:2   描述 进行一次独木舟的旅行活动,独木舟可以在港口租到,并且之间没有区别.一条独木舟最多只能 ...

  3. hdu_1037_Keep on Truckin'_201311021600

    Keep on Truckin' Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  4. SpringBoot多数据源改造(二)

    在上一篇的内容中,主要介绍了spring boot项目的多数据源改造的涉及的基本配置及改动.在spring项目中,常用Mybatis做ORM操作数据库,并且分页操作是避免不了的. 因此,这一篇主要介绍 ...

  5. F2BPM 开发Api与RESTfull应用服务Api 层次关系及示例

    目前越来越多的企业架构解决方案更加趋向于基于http协议“微服务”访问跨系统调用,而不使用统传的WebService调用,即通过RESTfull方式进行交互,更加轻量整合调用更加方便.本文档中所有F2 ...

  6. PF, Page File, 页面文件

    PF, Page File, 页面文件 是硬盘中用来当作内存使用的,仅仅提高物理内存可能导致CPU使用率高,因为降低了命中率: 学习了:https://baike.baidu.com/item/PF% ...

  7. android 随手记之文件+參数上传请求

    第一步:须要两个jar的支持,稍后以下给会出下载地址. 第二步:建立一个project 以下贴出最基本的代码 package com.example.testpaizhao; import java. ...

  8. iOS UITableView 去除多余切割线

    在UITableView初始化时加上下面代码就可以: self.tableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero ...

  9. linux下多线程的调试

    多线程调试的基本命令(均在gdb命令行使用):    info threads ---- 显示当前可调试的全部线程.每个线程都有自己的线程ID,显示结果中前面有*的表示当前调试的线程.    eg: ...

  10. MySQL 相邻两条数据相减

    <!-- 计算每两次消费的间隔天数 --> SELECT B.MEN_ID,TIMESTAMPDIFF(DAY,B.PRE_DATE,B.CURR_DATE) AS DAYS FROM ( ...