current position：Home>Learn how to make a barrage effect with JS

Learn how to make a barrage effect with JS

2021-08-27 10:31:19 【Front end sophomore】

Direct delivery of dry goods , What is the principle of barrage implementation , How do we use our front end web Technology to achieve ？

So let's just create a new one html file ：

image.png

Everyone named it in Chinese just like me . Chinese naming is not standardized , Wandering in the Jianghu , Big guys will laugh at you when they see your Chinese name .

Above picture , We introduced jquery plug-in unit , Yes, we use it jq Write , Return to the original （ Can't find cdn Linked partners can baidu bootcdn, Search inside jquery）. And took the title of a barrage net .

finish building html file , We need to work out the initial template . I have to mention here , I recommend the front-end development of children's shoes to use vscode To develop , Very easy to use. .

A little trick ： In the blank html File input ! Will automatically help you initialize html Templates

image.png

The template has been created , And introduce jquery after , The text begins ：

HTML add to 

<body>
    <div class="con">
        <div id="screen">
            <div class="dm_show">
                <!-- <div>text message</div> -->
            </div>
        </div>
        <div class="edit">
            <p class="msg">
                <input placeholder=" Say something ？" class="content" type="text" />
            </p>
            <p class="btns">
                <input type="button" class="send" value=" send out " />
                <input type="button" class="clear" value=" Clear the screen " />
            </p>
        </div>
    </div>
</body>
 Copy code

A simple html.

Write it again css：

CSS 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 code

Look at the effect ：

image.png

The whole structure has come out , Here is the top priority js：

js Logic code 

<script>
    $(function () {
        // Set up “ send out ” Button click event , Display the bullet screen on the bullet screen wall 
        $('.send').click(function () {
            // Get the contents of the text input box 
            var val = $('.content').val();
            // Assign the contents of the text box to val after , Clear the contents of the text box , So that the user can enter 
            $('.content').val('');
            // Use the contents of the text box with div Wrap it up , It is convenient for subsequent processing 
            var $content = $('<div class="text">' + val + '</div>');
            // Get the barrage wall object 
            $screen = $(document.getElementById("screen"));
            // Set the upper margin when the bullet screen appears , For any value 
            var top = Math.random() * $screen.height() + 40;
            // Set the upper margin and left margin of the bullet screen 
            $content.css({
                top: top + "px",
                left: 80
            });
            // Add the barrage body to the barrage wall 
            $('.dm_show').append($content);
            // The bullet screen moves from the left end to the far right , Time is 8 second , Then delete the element directly 
            $content.animate({
                left: $screen.width() + 80 - $content.width()
            }, 8000, function () {
                $(this).remove();
            });
        });
        // Set up “ Clear the screen ” Click event , Clear everything from the barrage wall 
        $('.clear').click(function () {
            $('.dm_show').empty();
        });
    });
</script>
 Copy code

An accident ？ Just a few lines , The notes are very detailed , Little friends can have a good look , Here I'll show you ：

Animation effect

20210820205855435.gif

Please forgive my poor picture quality , Fortunately, it doesn't affect the effect , Here is just a simple realization of the effect of a barrage , Not yet able to achieve enterprise class applications , Those in need can also improve themselves , Hey .

If enterprise video barrage , I also recommend dplayer player , A perfect player .

copyright notice
author[Front end sophomore],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827103115261m.html

The sidebar is recommended

guess what you like

Random recommended