使用jQuery实现弹幕效果

使用jQuery实现弹幕效果

实现步骤：

1. html结构：

<div class="boxDom" id="boxDom">
    <div class="idDom" id="idDom">
      <div class="content">
        <p class="title">弹幕:</p>
        <input type="text" class="text" id="text" />
        <button type="button" class="btn" id="btn">发送</button>
      </div>
    </div>
</div>

<div class="boxDom" id="boxDom">
    <div class="idDom" id="idDom">
      <div class="content">
        <p class="title">弹幕:</p>
        <input type="text" class="text" id="text" />
        <button type="button" class="btn" id="btn">发送</button>
      </div>
    </div>
</div>

css样式根据个人需求设置，就不一一赘述了。

2.script

  var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"];
  //1 绑定点击事件
  $('#btn').click(function () {
    //2随机颜色和高度
    var ranColor = parseInt(Math.random() * colors.length);
    var ranTop = parseInt(Math.random() * 400);
    //3 创建span设置css样式
    $('<span></span>')
      .text($('#text').val())
      .css('color', colors[ranColor])
      .css('top', ranTop)
      .css('left', 1500)
      .animate({
        left: -200
      }, 5000, 'linear', function () {
        console.log('完成了');
        // 删除运动的节点
        $(this).remove();
        console.log(this);

      }).appendTo($('#boxDom'));
    // 清空发射
    $('#text').val('');
  });
  // 绑定键盘事件
  $('#text').keyup(function (event) {
    let e = event || window.event;
    if (e.keyCode == 13) {
      // 直接调用发射按钮的点击事件
      $('#btn').click();
    }
  })

  var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"];
  //1 绑定点击事件
  $('#btn').click(function () {
    //2随机颜色和高度
    var ranColor = parseInt(Math.random() * colors.length);
    var ranTop = parseInt(Math.random() * 400);
    //3 创建span设置css样式
    $('<span></span>')
      .text($('#text').val())
      .css('color', colors[ranColor])
      .css('top', ranTop)
      .css('left', 1500)
      .animate({
        left: -200
      }, 5000, 'linear', function () {
        console.log('完成了');
        // 删除运动的节点
        $(this).remove();
        console.log(this);

      }).appendTo($('#boxDom'));
    // 清空发射
    $('#text').val('');
  });
  // 绑定键盘事件
  $('#text').keyup(function (event) {
    let e = event || window.event;
    if (e.keyCode == 13) {
      // 直接调用发射按钮的点击事件
      $('#btn').click();
    }
  })