利用JavaScript编写一个弹幕墙效果
创始人
2024-12-15 18:43:33
0次

1.首先要考虑弹幕墙需要什么:一面墙,输入框,发射按钮,关闭和开启弹幕按钮,在此关闭和开启设置为同一个按钮;

2.其次弹幕上墙以后需要移动,从墙的最右边移动到最左边,当移动到最左边时,这条弹幕就要消失;
3.初步的想法应该就是当在输入框输入你要发送的内容,点击发送按钮,在墙上会新建一个div来包含这条弹幕内容,再给这个div相应的移动动画class;

4.弹幕颜色随机,单条弹幕之间有间隔;

取随机颜色这里用的是

"#"+(Math.random()*0x1000000<<0).toString(16)

首先,写出它的静态页面;


弹幕墙

          发射弹幕     关闭弹幕   

css样式

#container{
  /*width:700px;*/
  height:500px;
  margin:50px 100px;
  border:solid 2px #7a2a1d;
}
h2{
  text-align:center;
}
.s_c{
  width:500px;
  margin:0 auto;
}
#message{
  width:400px;
  height:30px;
  margin:0 auto;
  position:relative;
  left:50px;
}
.btn{
  padding-top:20px;
  height:30px;
  margin-left:150px;
}
#sent,#clear{
  width:100px;
}

js代码部分:

var arr = [];//用于保存弹幕数据的数组;
var start = true;//用于判断是否需要开启弹幕
  $(document).ready(function(){
    var showscreen = $("#container");//弹幕墙的div
    var showHeight = showscreen.height();//弹幕墙div的高度
    var showWidth = showscreen.width();//弹幕墙div的宽度
    //点击发射按钮事件
    $("#sent").click(function(){
      var text = $("#message").val();//获取用户输入的待发送弹幕
      $("#message").val("");//清空弹幕发送区
      arr.push(text);//将数据存入实现定义好的用于保存弹幕数据的数组
      var send_div=$("
"+text+"
");       showscreen.append(send_div);       // var send_text=$("
+text+
");//新建div弹幕条       // var send_div = document.createElement("div");       // var inner = document.createTextNode(text);       // send_div.appendChild(inner);       // document.getElementById("container").appendChild(send_div)//把弹幕挂在墙上       move_text(send_div);     })     //按回车发送      $("input").keydown(function(event){        if(event.keyCode == 13){          $("#sent").trigger("click");//trigger触发被选元素的指定事件类型,触发#send事件的click类型        }      })      if(start==false){        start = true;        $("#clear").html("关闭弹幕");        run();      }      //关闭/开启弹幕按钮点击事件     $("#clear").click(function(){       if(start == true){         start = false;         $("#clear").html("开启弹幕");         showscreen.empty();       }else if(start == false){         start = true;         $("#clear").html("关闭弹幕");         run()       }     });      var topMin = showscreen.offset().top;      var topMax = topMin+showHeight;      var top = topMin;      var move_text = function(obj){        obj.css({          display:"inline",          position:"absolute"        })        var begin = showscreen.width() - obj.width(); //一开始的起点        top+=50;        if(top > topMax-50){          top = topMin;        }        //console.log("showscreenWidth"+showscreen.width());        //console.log("objWidth",obj.width());        obj.css({          left:begin,          top:top,          color:getRandomColor()        });        var time = 20000 + 10000*Math.random();        obj.animate({          left:"-"+begin+"px"        },time,function(){          obj.remove();        });      };     var getRandomColor = function(){       return '#'+('00000'+(Math.random()*0xffffff <<0).toString(16)).substr(-6);     }     var run = function(){       if(start == true){         if(arr.length > 0){           var n = Math.floor(Math.random()* arr.length + 1)-1;           var textObj = $("
"+arr[n]+"
");           showscreen.append(textObj);           //console.log("loop:"+textObj.html());           move_text(textObj);         }       }       setTimeout(run,3000);     }     jQuery.fx.interval = 50;     run(); })

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...