播放个视频的时候看到很有趣的弹幕，想着前端能不能做个弹幕效果。弹幕是滚动的，所以首先想到了<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中文乱码以及导出为sql语句和Excel问题解决

    Mysql中文乱码以及导出为sql语句和Excel问题解决 这几天基于Heritrix写了一个爬虫,用到mysql,在导入导出数据时,遇到一些乱码问题,好不容易解决了,记录一下,以备查看.一.导出数据 ...

  2. js递归解决汉诺塔问题

    汉诺塔是一个印度的古老传说.有三个圆柱,其中一个圆柱上放着若干圆盘,这些圆盘从上到下,直径递增,利用一个辅助圆柱,将原来柱子上的圆盘放到另一个柱子上,依旧是从上到下直径递增. 汉诺塔是一个经典的递归案 ...

  3. 使用c3p0与DBCP连接池，造成的MySql 8小时问题解决方式

    本文提供了对c3p0与DBCP连接池连接MySql数据库时. 8小时内无请求自己主动断开连接的解决方式.首先介绍一下我在项目(c3p0连接池)中遇到的问题,后面还提供了使用DBCP连接池的解决方式. ...

  4. Ant报错之out of memory

    用Ant打包一个比較大的项目的时候,遇到OutOfMemory的问题,求助于Google和百度,网上的解决方式非常多,可是个人认为不够具体全面.我的问题须要综合两种方法才解决.把方案记下来.以期帮助大 ...

  5. OC3大回调模式使用总结（三）block回调

    OC 3大回调模式使用总结(三)block回调 block 又称 代码块,闭包等 是一个匿名的函数,它能够当做一个对象来使用,仅仅只是这个对象非常特殊,是一段代码,他能够保存你写的一段预备性质代码,待 ...

  6. yun install java

    # yum install java-1.7.0-openjdk # yum install java-1.7.0-openjdk-devel 需要执行以上两步 查看版本 # java -versio ...

  7. luogu1063 能量项链

    题目大意 有一串项链,项链上的每个珠子有首尾两个数字,首尾相连的两个珠子的尾数字和头数字相同.每次选择相连的一对珠子,得到第一个项链的首数字*第一个项链的尾数字(第二个项链的首数字)*第二个项链的尾数 ...

  8. System.IO.Path

    System.IO.Path 分类: C#2011-03-23 10:54 1073人阅读 评论(0) 收藏 举报 扩展磁盘string2010c System.IO.Path提供了一些处理文件名和路 ...

  9. 洛谷P2916 [USACO08NOV]为母牛欢呼(最小生成树)

    P2916 [USACO08NOV]为母牛欢呼Cheering up the C… 题目描述 Farmer John has grown so lazy that he no longer wants ...

  10. Websocket实现前后台通信，demo小测试

    新需求大概如下:用户登录系统,登录成功之后建立websocket连接,实现通信 总体思路:前端不是我负责,只是简单的做个功能,先实现登录,把用户标识存入HttpSeesion,再建立websocket ...