An article teaches you how to use js to achieve the barrage effect

An article teaches you how to use js to achieve the barrage effect

Here is the barrage effect:

Barrage Effect

I believe everyone has seen it, so what is the principle of its implementation, and how do we use our web technology to implement it on the front end? ?

Create a new html file:

Hahahaha, don’t name it in Chinese like me.

Chinese naming is not in compliance with the standards. When you are out there in the world, the big guys will laugh at you when they see your Chinese naming.

In the above picture, we introduced the jquery plug-in. Yes, we wrote it in jq and returned to the original (friends who can’t find the CDN link can Baidu bootcdn and search for jquery in it). And gave it a title from the barrage website.

Create an initial template

I have to mention here that I recommend front-end developers to use vscode for development, it is very easy to use.

A little trick: Enter in a blank HTML file! It will automatically initialize the HTML template for you

The template has been created, and after jQuery is introduced, the main text begins:

HTML Additions

<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" />
                <input type="button" class="clear" value="Clear screen" />
            </p>
        </div>
    </div>
</body>

A simple HTML.

Let’s write the css:

CSS Padding

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

See the effect:

The overall structure has come out, the following is the js of the true 28 classics:

js logic code

<script>
    $(function () {
        //Set the "Send" button click event to display the bullet screen on the bullet screen wall$('.send').click(function () {
            //Get the content of the text input box var val = $('.content').val();
            //After assigning the content of the text box to val, clear the content of the text box so that the user can enter it next time$('.content').val('');
            //Wrap the text box content with div for subsequent processing var $content = $('<div class="text">' + val + '</div>');
            //Get the bullet screen object $screen = $(document.getElementById("screen"));
            //Set the top margin when the bullet screen appears to any value var top = Math.random() * $screen.height() + 40;
            //Set the top and left margins of the bullet screen $content.css({
                top: top + "px",
                left: 80
            });
            //Add the bullet screen body to the bullet screen wall$('.dm_show').append($content);
            //The bullet screen moves from the left to the right for 8 seconds, then delete the element directly$content.animate({
                left: $screen.width() + 80 - $content.width()
            }, 8000, function () {
                $(this).remove();
            });
        });
        //Set the "clear screen" click event to clear all contents in the bullet screen wall$('.clear').click(function () {
            $('.dm_show').empty();
        });
    });
</script>

Is it a surprise? Just a few lines, hahahaha.

The comments are very detailed, you can take a good look at them, here I will show you a demonstration:

Animation effects

Please forgive my poor picture quality, but it does not affect the viewing effect. Here I just simply implemented the effect of a barrage, which cannot reach the enterprise-level application. If you have the need, you can improve it by yourself. That's the reason, hehe.

If you want enterprise-level video barrage, I also recommend the dplayer player, which is a very perfect player.

This is almost the end of the discussion on front-end barrage. The above is an article that teaches you how to use js to implement the barrage effect in detail. For more information about js to implement barrage, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Native js to achieve barrage effect
  • Simple implementation of JavaScript bullet screen effect
  • Realizing bullet screen special effects based on JavaScript
  • JavaScript to achieve bullet screen wall effect

<<:  MySQL 8.0.19 supports locking an account after entering an incorrect password three times (example)

>>:  Create a code example of zabbix monitoring system based on Dockerfile

Recommend

Perfect Solution for No rc.local File in Linux

Newer Linux distributions no longer have the rc.l...

How to solve the problem of margin overlap

1. First, you need to know what will trigger the v...

This article summarizes the implementation methods of 6 load balancing technologies (summary)

Load balancing is a commonly used device in serve...

Detailed explanation of CSS style sheets and format layout

Style Sheets CSS (Cascading Style Sheets) is used...

Detailed explanation of three ways to wrap text in el-table header

Table of contents Problem Description Rendering T...

Analysis of the operating principle and implementation process of Docker Hub

Similar to the code hosting service provided by G...

Three properties of javascript objects

Table of contents 1. writable: writable 2. enumer...

Detailed explanation of using Docker to build externally accessible MySQL

Install MySQL 8.0 docker run -p 63306:3306 -e MYS...

Detailed explanation of common commands for network configuration of containers in Docker

Basic network configuration Although Docker can &...

Detailed explanation of whether the MySQL database should use foreign key constraints

1. Introduction The topic of whether to use forei...

An article to help you understand jQuery animation

Table of contents 1. Control the display and hidi...

10 skills that make front-end developers worth millions

The skills that front-end developers need to mast...

Detailed explanation of nodejs built-in modules

Table of contents Overview 1. Path module 2. Unti...

Deep understanding of the use of ::before/:before and ::after/:after

Part 1: Basics 1. Unlike pseudo-classes such as :...

Using MySQL in Windows: Implementing Automatic Scheduled Backups

1. Write a backup script rem auther:www.yumi-info...