Analysis of ape circle and implementation of barrage review with jQuery

Everyone is familiar with B station, especially its bullet screen system is imitated by many websites, but do you know how it is made? Today, the web front-end lecturer of ape circle uses jQuery to realize the effect of barrage review, hoping to inspire you.

First step: Layout

Part CSS

<style>

        *{padding: 0;margin: 0;

            font-family: "Microsoft YaHei";

            font-size: 16px;

        }

        html,body{

            width:100%;

            height: 100%;

        }

        .box{

            width: 100%;

            height: 100%;

            overflow: hidden;

            position: relative;

        }

        #bottom {

            width: 100%;

            height: 100px;

            background-color: #666;

            position:fixed;

            bottom:0px;

        }

        .content {

            width: 430px;

            height: 40px;

            margin: 30px auto;



        }

        .title {

            font-size: 22px;

            color: #fff;

            vertical-align: bottom;

            display: inline;

        }

        #text {

            width:300px;

            height: 30px;

            border: none;

            border-radius: 5px;

        }

        #btn1 {

            width: 60px;

            height: 30px;

            border: none;

            margin-left: 2px;

            background-color: red;

            color: #fff;



        }

        span {

            position: absolute;

            font-size: 30px;

            line-height: 30px;

            white-space: nowrap;

        }

</style>

//Here is the HTML section
<div id="box" class="box">

    <div id="bottom">

        <div class="content">

            <p class="title">Make complaints:</p><input type="text" id="text"><button id="btn1">launch</button>

        </div>

    </div>

</div>

Note span don't forget to add positioning, otherwise you can't animate

jQuery code implementation

The code looks very simple, mainly random color, random position of the bullet screen effect. Create a new span to set the X and Y coordinates, the effect and duration of the animation. After sending the barrage, clear the input box and bind the event to the input box. Press enter to send the barrage.

It should be noted that the callback function of the barrage animation, after the execution of the animation, must let this span self delete.

The above is a brief introduction of the web front-end lecturer of the little ape circle to the effect of jQuery's implementation of the barrage review. I believe you will see a lot of it, so hurry up and practice. Remember that the learning front-end not only needs to see the documents and videos, but also needs to practice a lot of front-end self-study communication groups: 820024416, so as to remember firmly. The videos can be watched in the little ape circle We have the latest video.

Tags: JQuery

Posted on Wed, 13 Nov 2019 14:20:25 -0500 by Jezthomp