Directly on dry goods, what is the principle of bullet screen implementation, how do we use our front-end web technology to achieve it?

Let’s start with a new HTML file:

You’ll use Chinese names like I do. Chinese naming is not standard, walking rivers and lakes, big men see your Chinese naming will laugh at you.

In the above image, we have introduced jquery plugin, yes we write it in JQ, go back to the original (if you can’t find CDN link, you can search jquery in Baidu bootcdn). And he took the title of a barrage.

Now that we’ve built the HTML file, we’re going to come up with the initial template. I have to say here, I recommend front-end development children to use vscode to develop, very easy to use.

A quick tip: Type in a blank HTML file! It automatically initializes the HTML template for you

Now that the template has been created and jquery has been introduced, the body begins:

HTML to add

<body> <div class="con"> <div id="screen"> <div class="dm_show"> <! -- <div>text message</div> --> </div> <div class="edit"> <p class=" MSG "> <input placeholder=" placeholder "; Class ="content" type="text" /> <p > <p class=" BTNS "> <input type="button" class="send" value=" send" /> <input Type = "button" class = "clear" value = "CLS" / > < / p > < / div > < / div > < / body >Copy the code

A piece of plain HTML.

To write CSS:

The CSS to fill

<style>
    .con {
        background-color: floralwhite;
        padding: 40px 80px 80px;
    }
 
    #screen {
        background-color: #fff;
        width: 100%;
        height: 380px;
        border: 1px solid rgb(229, 229, 229);
        font-size: 14px;
    }
 
    .content {
        border: 1px solid rgb(204, 204, 204);
        border-radius: 3px;
        width: 320px;
        height: 35px;
        font-size: 14px;
        margin-top: 30px;
    }
 
    .send {
        border: 1px solid rgb(230, 80, 30);
        color: rgb(230, 80, 0);
        border-radius: 3px;
        text-align: center;
        padding: 0;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        width: 159px;
        background-color: white;
    }
 
    .clear {
        border: 1px solid;
        color: darkgray;
        border-radius: 3px;
        text-align: center;
        padding: 0;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        width: 159px;
        background-color: white;
    }
 
    .edit {
        margin: 20px;
        text-align: center;
    }
 
    .edit .btns{
        margin-top: 20px;
    }
 
    .edit .msg input{
        padding-left: 5px;
    }
 
    .text {
        position: absolute;
    }
 
    * {
        margin: 0;
        padding: 0;
    }
 
    .dm_show {
        margin: 30px;
    }
</style>
Copy the code

Look at the results:

The overall structure is out, here are the most important js:

Js logic code

<script> $(function () {// Set "send" button click event, $('.send').click(function () {var val = $('.content').val(); // After assigning the contents of the text box to val, the contents of the text box are cleared so that the next time the user enters $('.content').val(' "); Var $content = $('<div class="text">' + val + '</div>'); $screen = $(document.getelementById ("screen")); Var top = math.random () * $screen.height() + 40; $content. CSS ({top: top + "px", left: 80}); $('.dm_show').append($content); $content.animate({left: $screen.width() + 80 - $content.width() }, 8000, function () { $(this).remove(); }); }); / / set the "black screen" click event, clear elastic curtain wall all the content in the $(' clear '). Click (function () {$(' dm_show '). The empty (); }); }); </script>Copy the code

The accident? Just a few lines 😓, notes written in detail, small partners can take a good look, here I give you a demo:

Animation effects

Please forgive me for the poor quality of the picture, but it does not affect the effect, here is just a simple implementation of the effect of a bullet screen, but also can not achieve enterprise-level applications, there is demand can also improve, hey hey.

If the enterprise video barrage, here also recommended dPlayer, a very perfect player.