效果如下

<html>

<head>

    <title></title>

  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

</head>

<body>

<div class="container">

  <div>

      <h4>在这里输入弹幕</h4>

    <input id ="danmu" type="" name="">

    <button>发射</button>

  </div>

  <div class="show">

      <div id="start"></div>

    </div>

</div>

<script type="text/javascript">

    var dammuNum = 0;

    function create(msg){

        dammuNum++;

        $('#start').append("<div id=\""+dammuNum+"\">"+msg+"</div>");

        var top = Math.ceil(Math.random()*50);

        fun(dammuNum,900,top);

    }

    function fun(cla,n,top){

        if(n>0){

            n--;

              $("#"+cla).css({left:+n+"px",position:"absolute",top:""+top+"0px"});

            setTimeout(fun,10,cla,n);

        }if(n==0){

            $("#"+cla).remove();

        }

    }

    $("button").click(function(){

        create($("#danmu").val());

    });

</script>

</body>

</html>

JavaScript实现弹幕效果的更多相关文章

  1. JQ实现弹幕效果

    JQ实现弹幕效果,快来吐糟你的想法吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charse ...

  2. 又一枚精彩的弹幕效果jQuery实现

    精彩的弹幕效果分享给大家,具有一定的参考价值,感兴趣的朋友可以尝试制作弹幕,具体内容如下   简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失.   涉及知识点:val().random ...

  3. JavaScript 省市级联效果

    JavaScript 省市级联效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  4. Rainyday.js – 使用 JavaScript 实现雨滴效果

    Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画.Rainyday.js 有功能可扩展的 API,例如碰撞检测和易 ...

  5. android 弹幕效果demo

    记得之前有位朋友在我的公众号里问过我,像直播的那种弹幕功能该如何实现?如今直播行业确实是非常火爆啊,大大小小的公司都要涉足一下直播的领域,用斗鱼的话来讲,现在就是千播之战.而弹幕则无疑是直播功能当中最 ...

  6. JavaScript之放大镜效果2

    在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...

  7. JavaScript之放大镜效果

    在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...

  8. Android 自定义View修炼-自定义弹幕效果View

    一.概述 现在有个很流行的效果就是弹幕效果,满屏幕的文字从右到左飘来飘去.看的眼花缭乱,看起来还蛮cool的 现在就是来实现这一的一个效果,大部分的都是从右向左移动漂移,本文的效果中也支持从左向右的漂 ...

  9. Android：简单的弹幕效果达到

    首先,效果图.分类似至360检测到的骚扰电话页面: 布局非常easy,上面是一个RelativeLayout,以下一个Button. 功能: (1)弹幕生成后自己主动从右側往左側滚动(Translat ...

随机推荐

  1. matplotlib学习记录 四

    # 绘制3月每天最高温和10月每天最高温散点图 from matplotlib import pyplot as plt # 让matplotlib能够显示中文 plt.rcParams['font. ...

  2. IAR生成bin，HEX文件

    1.生成bin,hex文件 options->output converter->output format binary:.bin文件:intel extended:hex文件. 生成的 ...

  3. gpg: signing failed: secret key not available

    1 使用png签名tag时报错“ jb@39:~/11$ git tag -s gpg -m "gpg"gpg: directory `/home/jb/.gnupg' creat ...

  4. JAVA-基础(一）

    1.一个变量可以声明为final,这样做的目的是阻止它的内容被修改.这意味着在声明final 变量的时候,你必须初始化它(在这种用法上,final类似于C/C++中的const). 例如: final ...

  5. 00018_流程控制语句switch

    1.选择结构switch switch 条件语句也是一种很常用的选择语句,它和if条件语句不同,它只能针对某个表达式的值作出判断,从而决定程序执行哪一段代码. 2.switch语句的语法格式 swit ...

  6. 网络编程基础socket 重要中：TCP/UDP/七层协议

    计算机网络的发展及基础网络概念 问题:网络到底是什么?计算机之间是如何通信的? 早期 : 联机 以太网 : 局域网与交换机 广播 主机之间“一对所有”的通讯模式,网络对其中每一台主机发出的信号都进行无 ...

  7. 《人月神话》读书笔记（2）-week3

    为了确保团队中的每个人都能保持系统概念上的完整性,关于项目的书面规格说明是必不可少的.手册要描绘用户可见的一切,但不应支配实现的过程.光有规格说明也是不够的,会议也是必要的.书中提到的周例会会迅捷地给 ...

  8. [luoguP2754] 星际转移问题（最大流）

    传送门 不同的时间每个飞船所在的地点不同,给我们启示按照时间构建分层图. 同一个地点 x <x, dayi - 1> -> <x, dayi> 连一条容量为 INF 的边 ...

  9. [AHOI2008]逆序对（dp）

    小可可和小卡卡想到Y岛上旅游,但是他们不知道Y岛有多远.好在,他们找到一本古老的书,上面是这样说的: 下面是N个正整数,每个都在1~K之间.如果有两个数A和B,A在B左边且A大于B,我们就称这两个数为 ...

  10. JAVA Apache POI 之sax 解析10万级大数量数据

    第一步让我们来看看我们的大量数据的excel 文件 好的下面第二步看一下代码: package com.chinait.utils; /** * 写这个东西主要是最近做了一个联通的数据迁移工作,他们就 ...