视频网站弹幕开发

从学习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 中,你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。

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

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

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

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

append(content|fn)

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

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

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

 

上面是查API拷贝过来的。

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

 

过程:

step 1:写一个html页面

step 2:写一个块

作为弹幕的开启open

step 3:写一个块

承载弹幕screen

  在这个

上面有三部分:

    关闭close

    弹幕显示show

    发射弹幕send

(两个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="#">Xa>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}

step 5:js代码

  初始化弹幕:init_screen()

  open点击事件实现弹幕开启

  open.toggle()

  show里面的文字动起来

  show.animate();

  添加弹幕

  show.append(div);

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

  代码如下:

    

最后,就是验证成果的时候,输入一堆无关的话,一直点“发射弹幕”。另外,适应不了手机,于是添加了自适应,效果有限,应该是自己的CSS代码写得不好。

 

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

 

转载于:https://www.cnblogs.com/mingmingcome/p/5603513.html

你可能感兴趣的:(视频网站弹幕开发)