效果如下

<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. org.apache.catalina.webresources.Cache.backgroundProcess The background cache eviction process was unable to free [10] percent of the cache for Context [/filestore] - consider increasing the maximum s

    需要耐心啊,太急于求成,希望直接就得到解决方法了...以至于正确方法都已经出现了,我却没有耐心看下去,所以反而又耽误了不少时间.... 项目加载100+张图片,还有一个小的MP4,所以console警 ...

  2. sqli-labs less1 &&less3&&less4学习心得

    0x01.less1 id=1/ id=1 and 1=1结果正常 id=1 and 1=2结果正常,不合理 id=1'提示:

  3. 【HIHOCODER 1403】后缀数组一·重复旋律（后缀数组）

    描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为长度为 N 的数构成的数列. 小Hi在练习过很多曲子以后发现很多作品自身包含一样的旋律.旋律是一段连续的数列,相似的旋律在原数列 ...

  4. POJ：2342-Anniversary party（树形dp入门题目）

    传送门:http://poj.org/problem?id=2342 Anniversary party Time Limit: 1000MS Memory Limit: 65536K Descrip ...

  5. ACM-ICPC 2018 徐州赛区网络预赛 H. Ryuji doesn't want to study

    262144K   Ryuji is not a good student, and he doesn't want to study. But there are n books he should ...

  6. C指针问题

    <!DOCTYPE html> 多级c指针传值问题 /* GitHub stylesheet for MarkdownPad (http://markdownpad.com) / / Au ...

  7. Python属性描述符（二）

    Python存取属性的方式特别不对等,通过实例读取属性时,通常返回的是实例中定义的属性,但如果实例未曾定义过该属性,就会获取类属性,而为实例的属性赋值时,通常会在实例中创建属性,而不会影响到类本身.这 ...

  8. bzoj3172 luogu3966 [TJOI2013]单词

    蒟蒻也能写出来的AC代码!这题是AC自动机模板题.插入单词时用一个没出现过的字符隔开就行了. 一些细节请看注释 #include <iostream> #include <cstri ...

  9. win 7 取得最高权限

    以管理员身份运行cmd,然后输入: net user administrator /active:yes 然后注销,就会看到你原来的用户已经是最高权限的用户了.以后做的操作都是最高权限的操作.

  10. ——CentOS 7 安装SQL Server2019

    环境准备  不废话,先把研究环境搭建起来.由于某些原因(晚点再说),本系列首先使用CentOS 7作为操作系统.官方指引中支持的Linux平台及文件系统中并没有指出CentOS,但是作为与Red Ha ...