该方法可能有bug,毕竟简单粗暴
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
 <style>
 * {
 margin: 0;
 padding: 0;
 }
 
 .video {
 margin: 50px auto 10px auto;
 width: 500px;
 height: 500px;
 border: 1px solid pink;
 }
 
 .btn {
 width: 40px;
 height: 25px;
 background: #26d4bd;
 color: #fff;
 border: none;
 outline: none;
 }
 .active{
 width: 65px;
 background: red;
 }
 .box{
 margin: 0px auto;
 width: 500px;
 height: 500px;
 }
 </style>
 </head>
 <body>
 <div class="video" id="video"></div>
 <div class="box">
 <input type="text" id="text"/> <button type="button" id="btn" class="btn">发送</button>
 <button type="button" id="clear" class="btn active">清空弹幕</button>
 </div>
 
 <script>
 $("#btn").click(function(){
 $("#video").append('<marquee behavior="scroll" direction="left" loop="1" scrollamount="100" scrolldelay="500">' $("#text").val() '</marquee>')
 $("#text").val("")
 })
 
 $("#clear").click(function(){
 $("#video").empty()
 })
 </script>
 </body>
</html>
更多专业前端知识,请上 【猿2048】www.mk2048.com