Javascript实现的一个简单的弹幕效果-入门版

思路如下:

• 依据web的三层架构搭建好页面
• 处理页面逻辑

---

一.基本结构的搭建

我需要的样式如上图:所以我的基本结构也就明确下来了
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" />
            <input type="button" class="btn" id="btn" value="发射">
        </div>
    </div>
</div>

2.CSS样式基础

html,
  body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    font-family: "微软雅黑";
    font-size: 62.5%;
  }

  .boxDom {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  .idDom {
    width: 100%;
    height: 100px;
    background: #666;
    position: fixed;
    bottom: 0px;
  }

  .content {
    display: inline-block;
    width: 430px;
    height: 40px;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
  }

  .title {
    display: inline;
    font-size: 4em;
    vertical-align: bottom;
    color: #fff;
  }

  .text {
    border: none;
    width: 300px;
    height: 30px;
    border-radius: 5px;
    font-size: 2.4em;
  }

  .btn {
    width: 60px;
    height: 30px;
    background: #f90000;
    border: none;
    color: #fff;
    font-size: 2.4em;
  }

  span {
    width: 300px;
    height: 40px;
    position: absolute;
    overflow: hidden;
    color: #000;
    font-size: 4em;
    line-height: 1.5em;
    cursor: pointer;
    white-space: nowrap;
  }

二.JS思路的分析

我要做的是弹幕效果,弹幕效果的重要元素如下:

1. 发射按钮
2. 在页面上滚动的文字

所以可以确定事件为button按钮的点击事件;在我点击完以后,就会把纪录在输入框的内容弹出去,在页面部分显示,所以这里需要动态创建一个span标签用来保存我获取到的输入框的内容,同时也用于显示在页面上滚动,这里引入了jQuery的动画函数来完成!

$(function() {
   //获取输入框
  var $txt = $('#text');
  //给按钮添加点击事件
  $('#btn').click(function() {
    //如果内容为空,不执行
    if( $txt.val().trim() === '' ) {
      return;
    }

    $('<span></span>')
      .text( $txt.val() ) 
      .css({
        color: 'red',             //颜色固定为红色
        left: $(window).width(), 
        top: 400                 //top固定为400
      })
      .animate({
        left: -200
      }, 10000, 'linear', function() {
        $(this).remove();    //移除span元素
      })
      .appendTo( '#boxDom' );
       // 清空内容
      $txt.val('');
  });
  })

这样一个简单的弹幕效果就完成了,但是效果比较单一,颜色是固定的,然后高度也是固定的,而且还没有enter键入事件,所以还可以继续进行优化!