Bullet Screen Effect Implemented by jQuery

The effect is as follows:

The code is as follows:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">-8">
 <title></title>
 <style>
 *{
 margin:0;
 padding:0;
 }
 #wrap{
 width:800px;
 height:550px;
 background:#E9E8E8;
 margin:0 auto;
 position:relative;
 }
 #content{
 width:750px;
 height:400px;
 background:#fff;
 margin:0 auto;
 border-radius: 15px;
 position:relative;
 overflow:hidden;
 }
 input:nth-of-type(1){
 width:250px;
 height:30px;
 margin:20px 0 0 200px;  
 }
 input:nth-of-type(2){
 width:60px;
 height:33px;  
 }
 .p{
 height:30px;
 line-height:30px;
 position:absolute;
 top:0;
 left:770px;
 font-weight:900;
 font-size: 30px;
 }
 </style>
 </head>
 <body>
 <div id="wrap">
 <div id="content">
 </div>
 <input type="text" id="txt" placeholder="Come and vent together~"/>
 <input type="button" value="Send" id="btn" />
 </div>
 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
 <script>
 $(function(){
 $("#btn").click(function(){
  var $value=$("#txt").val();
  var $p=$("<p></p>"
  $p.addClass("p");
  $p.text($value);
  $("#txt").val("");//Set the text box content to empty after clicking
  )*)-3)
  )16+)*10)
  ) + )*255)+) + )*255)+) + )*255)+) 
  )-)
  )
  var _timer=Math.ceil(Math.random()*4000)+3000;
  $p.stop().animate({"left":"-500px"},_timer,function(){
  $p.remove();
  }); 
 });
 }
 </script>
 </body>
</html>

That's all for this article. I hope the content of this article can bring some help to everyone's learning or work, and I also hope to get more support for Yell Tutorial!

Declaration: The content of this article is from the Internet, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the copyright, has not been manually edited, and does not assume relevant legal liabilities. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (When sending an email, please replace # with @ for reporting, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)

Basic Tutorial