JQ实现弹幕效果，快来吐糟你的想法吧

效果图：

代码如下，复制即可使用：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>JQ实现弹幕效果</title>

        <style type="text/css">

            *{

                padding: 0;

                margin: 0;

            }

            #box{

                height:700px;

                width:1000px;

                margin: 0 auto;

                border:1px solid #000000;

                position: relative;

            }

            #main{

                width:100%;

                height:605px;

                position: relative;

                overflow: hidden;

            }

            p{

                position: absolute;

                left:1000px;

                width:200px;

                top:0;

            }

            #bottom{

                width:100%;

                height:80px;

                background: #ABCDEF;

                text-align: center;

                padding-top: 15px;

                position: absolute;

                left: 0;

                bottom: 0;

            }

            #txt{

                width:300px;

                height:50px;

            }

            #btn{

                width:100px;

                height:50px;

            }

        </style>

    </head>

    <body>

        <div id="box">

            <div id="main">

            </div>

            <div id="bottom">

                <input type="text" id="txt" placeholder="请输入内容" />

                <input type="button" id="btn" value="发射" />

            </div>

        </div>

        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

        <script type="text/javascript">

            $(function(){

                var pageH=parseInt($("#main").height());

                var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"];

                $("#btn").bind("click",auto);

                document.onkeydown=function(e){

                    if(e.keyCode == 13){

                        auto();

                    }

                };

                function auto(){

                    var $value = $("#txt").val();

                    $("#main").append("<p>" + $value + "</p>");

                    $("#txt").val("");

                    var _top=parseInt(pageH*(Math.random()));

                    var num=parseInt(colorArr.length*(Math.random()));

                    $("p:last-child").css({"top":_top,"color":colorArr[num],"font-size":"20px"});

                    $("p:last-child").animate({"left":"-200px"},10000);

                    $("p:last-child").stop().animate({"left":"-300px"},10000,"linear",function(){

                        $(this).remove();

                   });

                    //console.log($value);

                };

            })

        </script>

    </body>

</html>

如有错误，欢迎联系我改正，非常感谢！！！

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

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

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

  2. android 弹幕效果demo

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

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

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

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

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

  5. Android弹幕功能实现，模仿斗鱼直播的弹幕效果

    转载出处:http://blog.csdn.net/sinyu890807/article/details/51933728 本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 郭霖 即 ...

  6. 原生JS实现弹幕效果

    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

  7. h5做直播的弹幕效果

    最近在搞弹幕效果所以就写一个关于弹幕的吧,刚开始寻思去网上找插件的,但找的插件和我的需求都不太相符,其实做弹幕我知道的有两种方法: 1:一种是用canvas和对象来完成弹幕想过,用canvas来完成弹 ...

  8. Android 弹幕效果开发案例

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

  9. js实现弹幕效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

随机推荐

  1. 如何用Delphi开发网游外挂

    1.动作式,所谓动作式,就是指用API发命令给窗口或API控制鼠标.键盘等,使游戏里的人物进行流动或者攻击,最早以前的“石器”外挂就是这种方式.2.本地修改式,这种外挂跟传统上的一些游戏修改器没有两样 ...

  2. Django通用视图APIView和视图集ViewSet的介绍和使用(Django编程-1)

    1.APIView DRF框架的视图的基类是 APIView APIView的基本使用和View类似 Django默认的View请求对象是 HttpRequest,REST framework 的请求 ...

  3. Simple Cycles Edges CodeForces - 962F（点双连通分量）

    题意: 求出简单环的所有边,简单环即为边在一个环内 解析: 求出点双连通分量,如果一个连通分量的点数和边数相等,则为一个简单环 点双连通分量  任意两个点都至少存在两条点不重复的路径  即任意两条边都 ...

  4. c# DataGridView绑定DataTable对象之后总会多一行

    DataGridView 属性 AllowUserToAddRows = false

  5. 稳定排序nlogn之归并排序_一维,二维

    稳定排序nlogn之归并排序_一维,二维 稳定排序:排序时间稳定的排序 稳定排序包括:归并排序(nlogn),基数排序[设待排序列为n个记录,d个关键码,关键码的取值范围为radix,则进行链式基数排 ...

  6. Redis数据类型和常用命令

    Redis相较于其它的数据库虽然简单,但是要熟记所有命令的用法也并非易事.一个简单的技巧是通过要操作的数据类型来将这些命令进行结构化. 数据类型和对应命令 所有存储于redis中的数据都对应于一个键值 ...

  7. 常用日期计算SQL语句

    -- 本月的第一天 SELECT DATEADD(mm, DATEDIFF(mm,0,getdate()), 0) -- 本月的最后一天 SELECT DATEADD(ms,-3,DATEADD(mm ...

  8. python数字前自动补零

    >>> '%d' % 23 #输出23 ' >>> '%5d' % 23 #输出的数字前有3个空位,共占5个字符 ' >>> '%05d' % 2 ...

  9. Hadoop基础-常见异常剖析之防坑小技巧

    Hadoop基础-常见异常剖析之防坑小技巧 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.

  10. MySQL的备份和恢复-基于LVM快照的备份（lvm-snapshot）

    MySQL的备份和恢复-基于LVM快照的备份(lvm-snapshot) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.什么是快照卷 如上图所示,原卷和快照卷可以不一样大,因为 ...