让弹幕给 PPD 生个孩子

Pikachu 发布于2019-08-22 10:37 / 647人阅读

摘要：使用的的方法实现了文字滚动我们需要做一些准备工作例如我们为了让弹幕可以变颜色我们写了下面这个方法。判断存储弹幕信息的数据是否为空随机抽取数组中的一个元素之后把它追加到这个中执行文字滚动的方法。

怎样才能跑起来我写的弹幕程序

资源下载

申请野狗后端云账号注册

创建应用：

复制appId到index.html的 var ref = new Wilddog("https://.wilddogio.com"); 处

可以跑起来了!

怎样才能做一个这样的应用程序呢？

成果图：

我们要使用HTML和CSS画一个界面，如下：

具体代码就不一一介绍了,如果你想直接使用狗场的界面UI,请复制下面的代码:

这个HTML和CSS是前端的基础,这个我们不多说,我们主要来看一下JS代码:
弹幕是滚动的,所以我们写了一个可以让对象移动的方法。

var moveObj = function(obj) {
        var _left = $(".d_mask").width() - obj.width();
        _top = _top + 50;
        if(_top > (topMax - 50)){
            _top = topMin;
        }
        obj.css({left:_left,top:_top,color:getReandomColor()});
        var time = 20000 + 10000 * Math.random();
        //使用的JQuery的animate方法实现了文字滚动
        obj.animate({left:"-"+_left+"px"}, time, function(){
            obj.remove();
        });
    }

我们需要做一些准备工作,例如:我们为了让弹幕可以变颜色我们写了下面这个方法。

//随机获取一个RGB格式颜色,关于什么是RGB格式的颜色,请百度
var getReandomColor = function() {
        return "#"+(function(h){
            return new Array(7-h.length).join("0")+h
            })((Math.random()*0x1000000<<0).toString(16))
}

之后我们把文字获取过来,并且执行文字滚动的方法。

var getAndRun = function() {
        //判断存储弹幕信息的数据是否为空
        if (arr.length > 0) {
            var n = Math.floor(Math.random() * arr.length + 1) - 1;
            //随机抽取arr数组中的一个元素,之后把它追加到.d_show这个div中
            var textObj = $("" + arr[n] + "");
            $(".d_show").append(textObj);
            //执行文字滚动的方法。
            moveObj(textObj);
        }

        setTimeout(getAndRun, 3000);
    }

以下是我们的全部JS代码,带有非常详细的注释。希望你们能看懂。

但是还是没有加上视频的功能,这个我要好好想一想!

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90933.html

让弹幕给 PPD 生个孩子

摘要：使用的的方法实现了文字滚动我们需要做一些准备工作例如我们为了让弹幕可以变颜色我们写了下面这个方法。判断存储弹幕信息的数据是否为空随机抽取数组中的一个元素之后把它追加到这个中执行文字滚动的方法。怎样才能跑起来我写的弹幕程序资源下载申请野狗后端云账号注册创建应用：showImg(https://segmentfault.com/img/remote/146000000683932...

linkFly 2019-08-29 11:16 评论0 收藏0
让弹幕给 PPD 生个孩子

摘要：使用的的方法实现了文字滚动我们需要做一些准备工作例如我们为了让弹幕可以变颜色我们写了下面这个方法。判断存储弹幕信息的数据是否为空随机抽取数组中的一个元素之后把它追加到这个中执行文字滚动的方法。怎样才能跑起来我写的弹幕程序资源下载申请野狗后端云账号注册创建应用：showImg(https://segmentfault.com/img/remote/146000000683932...

RyanHoo 2019-08-01 15:42 评论0 收藏0
弹幕，是怎样练成的？

showImg(https://segmentfault.com/img/bVbk1Nl?w=1080&h=602); 说起弹幕看过视频的都不会陌生，那满屏充满着飘逸评论的效果，让人如痴如醉，无法自拔最近也是因为在学习关于 canvas 的知识，所以今天就想和大家分享一个关于弹幕的故事那么究竟弹幕是怎样炼成的呢？我们且往下看(look) 看什么？看效果 showImg(https://s...

lwx12525 2019-08-23 14:02 评论0 收藏0
【小案例】基于色键技术的纯客户端实时蒙版弹幕

摘要：组件提供了一系列的操作接口以方便用户对弹幕的相关特性进行定制。对于这种类型的图像，我们可以使用色键的方式进行抠图生成蒙版。其中，用于更新蒙版的接口为。导读：本文内容是笔者最近实现的 web 端弹幕组件—— Barrage UI 的一个延伸。在阅读本文的实例和相关代码之前，不妨先浏览项目文档，对组件的使用方式和相关接口进行了解。各位童鞋如果经常上 B 站（bilibili.com） ...

muzhuyu 2019-08-23 14:50 评论0 收藏0