弹幕效果(jquery)

1:css部分

  *{

            padding: 0;

            margin: 0;

        }

        .content{

          

            width: 1200px;

            margin: 0 auto;

              height: 600px;

              background-color:gray;

              position: relative;  

              /* overflow: hidden;      */

        }

        .send{

            width: 300px;

            margin:  0 auto;

            height: 50px;

            margin-top: 50px;

        }

        .content video{

        

            width: 1200px;

            height: 600px;

        }

    .send input{

        width: 200px;

        height: 30px;

    }

    .send button{

        display: inline-block;

        width: 60px;

        height: 34px;

    }

    .content p{

        min-width: 300px;

        font-size: 14px;

        position: absolute;

        color: greenyellow;

    }

2html部分

<div class="content">

            <!-- <video src="./fabuhui.mp4" controls="controls"></video> -->

             <p></p>

         </div>

         <div class="send">

         <input type="text" placeholder="请输入弹幕">

         <button>发送</button> 

        </div> 

   jquery 部分

   var color = ["red","blue","yellow","green","black"];//颜色

 

    $("button").click(function(){

        var p =$("<p></p>")

      var h =Math.random()*$(".content").height(); //随机获取弹幕的位置

      var  index = parseInt((Math.random()*color.length))  ;//随机获取颜色

    p.text($("input").val()).css({

         left:1200+"px",       //设置弹幕位置

         top:h+"px",

         color:color[index]

    }).animate({       //执行动画

        left:"-100px"

    },6000,function(){

        $(this).remove(); //销毁弹幕

    }).appendTo(".content")

    $("input").val(" ");  //清空输入框

}) 

   $("input").change(function(){

       $("button").click();

   })