JS实现实时弹幕效果-优快云博客

本文链接：https://blog.youkuaiyun.com/achang_123/article/details/114926908

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />
<title>js实现弹幕</title>
<style type="text/css">
.barrage .screen {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0px;
   right: 0px;
}

.barrage .screen .s_close {
   z-index: 2;
   top: 20px;
   right: 20px;
   position: absolute;
   text-decoration: none;
   width: 40px;
   height: 40px;
   border-radius: 20px;
   text-align: center;
   color: #fff;
   background: #000;
   line-height: 40px;
   display: none;
}

.barrage .screen .mask {
   position: relative;
   width: 100%;
   height: 100%;
   background: #000;
   opacity: 0.5;
   filter: alpha(opacity = 1);
   z-index: 1;
}

.barrage {
   display: none;
   width: 100%;
   height: 100%;
}

.barrage .screen .mask div {
   position: absolute;
   font-size: 20px;
   font-weight: bold;
   white-space: nowrap;
   line-height: 40px;
   z-index: 40;
}

.barrage .send {
   z-index: 1;
   width: 100%;
   height: 55px;
   background: #000;
   position: absolute;
   bottom: 0px;
   text-align: center;
}

.barrage .send .s_text {
   width: 600px;
   height: 40px;
   line-height: 10px;
   font-size: 20px;
   font-family: "微软雅黑";
}

.barrage .send .s_btn {
   width: 105px;
   height: 40px;
   background: #22B14C;
   color: #fff;
}
</style>
</head>
<body>
   <a href="#" class="showBarrage">打开弹幕</a>
   <div class="barrage">
       <div class="screen">
           <a href="#" class="s_close">X</a>
           <div class="mask"></div>
       </div>
       
       <div class="send">
           <input type="text" class="s_text" /> <input type="button"
               class="s_btn" value="说两句" /> <input id="image" type="button"
               class="s_btn2" value="两句"/>
           
       </div>

<span class="s_close">X</span>
   </div>

           $(".showBarrage,.s_close").click(function() {
               $(".barrage,.s_close").toggle("slow");
           });
           init_animated();
       })
       //提交评论
       $(".send .s_btn")
               .click(
                       function() {
                           var text = $(".s_text").val();
                           if (text == "") {
                               return;
                           }
                           ;
                           var _lable = $("<div style='right:20px;top:0px;opacity:1;color:"
                                   + getRandomColor()
                                   + ";'>"
                                   + text
                                   + "</div>");

                           $(".mask").append(_lable.show());
                           init_barrage();
                       })
       //初始化弹幕技术
       function init_barrage() {
           var _top = 0;
           $(".mask div").show().each(function() {
               var _left = $(window).width() - $(this).width();//浏览器最大宽度，作为定位left的值
               var _height = $(window).height();//浏览器最大高度
               _top += 75;
               if (_top >= (_height - 130)) {
                   _top = 0;
               }
               $(this).css({
                   left : _left,
                   top : _top,
                   color : getRandomColor()
               });
               //定时弹出文字
               var time = 10000;
               if ($(this).index() % 2 == 0) {
                   time = 15000;
               }
               $(this).animate({
                   left : "-" + _left + "px"
               }, time, function() {
                   $(this).remove();
               });
           });
       }
       //获取随机颜色
       function getRandomColor() {
           return '#' + (function(h) {
               return new Array(7 - h.length).join("0") + h
           })((Math.random() * 0x1000000 << 0).toString(16))
       }
       //换背景
       $(".send .s_btn2").click(
               function() {
                   //alert();
                   //var simg=$(this).find("img").attr("src");
                   //var bimg=simg.replace(/-\d*/,''); //根据小图找到大图的名称
                   img = $(this).attr('src');
                   $(".barrage .screen .mask").css("background-image",
                           "url(bimg1.jpg)");//url("+bimg+"),添加变量的方法
                   // $(".barrage .screen .mask").css("background","red")