jQuery to achieve the barrage effect case

This article shares the specific code of jQuery to achieve the barrage effect for your reference. The specific content is as follows

Effect:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tucao Danmaku</title>
    
    <script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
    <style>
            html, body {
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      font-family: "Microsoft YaHei";
      font-size: 62.5%;
    }
    
    .boxDom {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    
    .idDom {
      width: 100%;
      height: 100px;
      background: #666;
      position: fixed;
      bottom: 0px;
    }
    
    .content {
      display: inline-block;
      width: 430px;
      height: 40px;
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      margin: auto;
    }
    
    .title {
      display: inline;
      font-size: 4em;
      vertical-align: bottom;
      color: #fff;
    }
    
    .text {
      border: none;
      width: 300px;
      height: 30px;
      border-radius: 5px;
      font-size: 2.4em;
    }
    
    .btn {
      width: 60px;
      height: 30px;
      background: #f90000;
      border: none;
      color: #fff;
      font-size: 2.4em;
    }
    
    span {
      width: 300px;
      height: 40px;
      position: absolute;
      overflow: hidden;
      color: #000;
      font-size: 4em;
      line-height: 1.5em;
      cursor: pointer;
      white-space: nowrap;
    }
    </style> 
</head> 
   
<body>
    
<div class="boxDom" id="boxDom">
  <div class="idDom" id="idDom">
    <div class="content">
      <p class="title">Comments:</p>
      <input type="text" class="text" id="text"/>
      <button type="button" class="btn" id="btn">Launch</button>
    </div>
  </div>
</div>
 
<script>
   
  
  $(function () {
    
      //Register event bullet screen fonts of different colors var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"];
    $("#btn").click(function () {
      var randomColor = parseInt(Math.random() * colors.length);
      var randomY = parseInt(Math.random() * 400);
      
      $("<span></span>")//Create span
        .text($("#text").val())//Set content.css("color", colors[randomColor])//Set font color.css("left", "1400px")//Set left value.css("top", randomY)//Set top value.animate({left: -500}, 10000, "linear", function () {
          //When you reach the end point, you need to delete $(this).remove();
        })//Add animation.appendTo("#boxDom");
      
      
      $("#text").val("");
    });
    
    
    $("#text").keyup(function (e) {
      if (e.keyCode == 13) {
        $("#btn").click();
      }
    });
    
  });
</script>
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

js realizes the effect of Tanabata confession barrage, jQuery realizes barrage technology
jQuery to achieve simple barrage production
jQuery implements bullet screen effects
jQuery to achieve live barrage effect
jQuery implements simple bullet screen effect
Simple implementation of jQuery bullet screen effect
Implementing Danmu APP based on jQuery
Realizing the barrage effect based on jQuery
Another wonderful bullet screen effect jQuery implementation
Finally realized! Wonderful jQuery barrage effect

<<: Ubuntu20's tzselect setting time failure problem, Raspberry Pi server (recommended)

>>: mysql charset=utf8 do you really understand what it means