视频网站弹幕开发

Posted 2020-07-28 mingmingcome

从学习html，css，js两三个月了，总觉得学习的不够深、不够透，就像犯错时听老师的教导，总是左耳进，右耳出。于是就从网上找一个实战例子来增加一下自己的记忆，刚好看到有个基础课程，视频网站弹幕开发，就自己照着敲一下，写一下自己的理解。

现在绝大部分的视频网站都提供了弹幕的功能，让我们在看视频之余，还可以随心所欲地吐槽一下，那今天我们就来探索视频网站弹幕开发（没有后端）。

 

效果图：

 

原料：

phpstorm(曾经讨论过编辑器，其实记事本最厉害，编辑器不重要，重要的是写代码的人。LOL中，英雄并不重要，重要的是使用英雄的人)
jQuery类库
html
css

 

 

用到的jQuery方法：

toggle([speed],[easing],[fn])

　　用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

　　如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

animate(params,[speed],[easing],[fn])

　　用于创建自定义动画的函数。

　　这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

　　而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

　　在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 "<em>+=</em>" 或 "<em>-=</em>" 来让元素做相对运动。

params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

fn:在动画完成时执行的函数，每个元素执行一次。

append(content|fn)

　　向每个匹配的元素内部追加内容。

　　这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。

content:要追加到目标中的内容

 

上面是查API拷贝过来的。

第一个方法用来打开、关闭弹幕，第二个方法是让弹幕动起来的，第三个方法是添加新的弹幕。

 

过程：

step 1：写一个html页面

step 2：写一个块<div>作为弹幕的开启open

step 3：写一个块<div>承载弹幕screen

　　在这个<div>上面有三部分：

　　　　关闭close<div>

　　　　弹幕显示show<div>

　　　　发射弹幕send<div>（两个input，一个type="text",一个type="button")

<div style="text-align: center;">
    <br /><br /><br /><br /><br /><br /><br /><br />
    <h1><a id="dm-open" href="#">客官，你点我啊</a></h1>
</div>
<div class="dm">
    <div class="dm-screen">
        <div id="dm-close"><a href="#">X</a></div>
        <div class="dm-show">
            <div>爱你</div>
            <div>一生中最爱</div>
            <div>偏偏喜欢你</div>
            <div>只想一生跟你走</div>
        </div>
    </div>
    <div class="dm-send">
        <div class="dm-sub">
            <input id="dm-txt" type="text" value="请输入你想说的话" title=""/>
            <input id="dm-btn" type="button" value="发射弹幕" />
        </div>
    </div>
</div>

 

 step 4：写css部分代码(太多了，我也是想到什么就写什么的，没什么头绪）

　　如：根据上面块的划分：

　　　open 只有一个链接a，a{text-decoration:none;} a:hover{text-decoration:underline;}

　　　screen 用来显示弹幕内容 screen{background-color:#000000;opacity:o.5}

　　   close 设置为圆角、右上角 close{border-radius:19px;//大小为块大小的一半}

　　   show 只要设置一下字体的大小 show{font-size:22px;}

　　　send 在底部{bottom:0;},有一个输入框和一个按钮，添加圆角 #txt{border-radius:8px}

<style>
        *{
            margin:0;padding:0;
        }
        a{
            text-decoration:none;
        }
        a:hover{
            text-decoration:underline;
        }
        body{
            font-family:serif;
        }
        .dm{
            height:100%;
            width:100%;
            position:absolute;
            top:0;
            left:0;
            display:none;
        }
        .dm-screen{
            height:100%;
            width:100%;
            position:absolute;
            top:0;
            left:0;
            background-color: #000000;
            opacity:0.5;
            z-index:1;
        }
        #dm-close{
            width:38px;
            height:38px;
            position:absolute;
            top:20px;
            right:20px;
            background-color:#fff;
            border-radius:19px;
            border:1px solid #000;
            text-align:center;
            line-height:38px;
            color:white;
            font-size:32px;
            z-index:3;
        }
        #dm-close a:hover{
            color:white;
        }
        #dm-close:hover{
            background-color:red;

        }
        .dm-show{
            position:relative;
        }
        .dm-show div{
            font-size:22px;
            position:absolute;
            /*right:0;*/
            z-index:2;
            color:#ffffff;
        }
        .dm .dm-send{
            position:absolute;
            height: 88px;
            width:100%;
            background-color:#000;
            bottom:0;
            z-index:1;
            border-radius:4px;
        }
        .dm .dm-send .dm-sub{
            height:88px;
            text-align:center;
            line-height:100px;
        }
        .dm .dm-send .dm-sub #dm-txt{
            height:48px;
            width:480px;
            border:0;
            border-radius:8px;
            font-size:18px;
        }
        .dm .dm-send .dm-sub #dm-btn{
            height:48px;
            width:66px;
            border:0;
            background-color: #65c33d;
            color:#fff;
            border-radius:8px;
        }
        .dm .dm-send .dm-sub #dm-btn:hover{
            background-color: #3eaf0e;
        }
    </style>

step 5：js代码

　　初始化弹幕：init_screen()

　　open点击事件实现弹幕开启

　　open.toggle()

　　show里面的文字动起来

　　show.animate();

　　添加弹幕

　　show.append(div);

　　为了可以得到随机的颜色，借用了getRandomColor()方法

　　代码如下：

<script>
    $(function(){
        //打开、关闭弹幕
        $("#dm-open,#dm-close").click(function(){
            $(".dm").toggle(1000);
        });
        //添加弹幕内容
        $("#dm-btn").click(function(){  
            var txt=$("#dm-txt").val();
            var div="<div>"+txt+"<div>";
            $(".dm-show").append(div);
            init_screen();
        });
        init_screen();
    });
    function init_screen(){
        var _top=0;
        $(".dm-show").find("div").show().each(function(){
            //获取弹幕初始位置：让它在最右边
            var _left=$(window).width()-$(this).width();
            var _height=$(window).height();

            $(this).css({left:_left,top:_top,color:getRandomColor()});

            _top=_top+66;
            if(_top>=_height-100)
                _top=0;

            var time=16000;
            if($(this).index()%2==0)
                    time=20000;
            //jQuery动画
            $(this).animate({left:\'-\'+_left+\'px\'},time,"linear");

        });
    }
    //获取随机颜色
    var getRandomColor = function(){
        return  \'#\' +
                (function(color){
                    return (color +=  \'0123456789abcdef\'[Math.floor(Math.random()*16)])
                    && (color.length == 6) ? color : arguments.callee(color);
                })(\'\');
    }
</script>    

最后，就是验证成果的时候，输入一堆无关的话，一直点“发射弹幕”。另外，适应不了手机，于是添加了<meta name="viewport" content="width=device-width,initial-scale=1.0" />自适应，效果有限，应该是自己的CSS代码写得不好。

 

心得：写页面之前，要心中有框架，再去想实现。