bullet-screen

bullet-screen.markdown

bullet-screen

A Pen by yyguangzheng on CodePen.

License.

index.html

<div class="backgroundDiv">
  <div class="barrageDiv">
  </div>
  <nav class="operationDiv row">
    <div class="leftDiv">
      <input type="checkbox" checked />
    </div>
    <div class="col-xs-8">
      <div class="input-group">
        <input name="messageContent" type="text" class="form-control" placeholder="您想说……">
        <span class="input-group-btn">
          <button name="sendMessage" class="btn btn-primary" type="button"><i class="glyphicon glyphicon-send"></i> 发送</button>
          <button name="clearMessage" class="btn btn-default" type="button">清除</button>
        </span>
      </div><!-- /input-group -->
    </div><!-- /.col-lg-8 -->
    <div class="rightDiv colorDiv dropup">
       <a id="colorDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle" href="javascript:;"><img src="https://files.lovelong.cn/common/ui/easyico/C/color/01/png/64.png"></a>
      <ul class="dropdown-menu" aria-labelledby="colorDropdownMenu">
        <li><a href="#"><img src="https://c1.staticflickr.com/3/2883/33442895633_51da32a5d3_o.jpg"></a></li>
        <li><a href="#"><img src="https://c1.staticflickr.com/5/4164/34096068682_9dd16b78b2_o.jpg"></a></li>
        <li><a href="#"><img src="https://c1.staticflickr.com/5/4176/34212555676_f14490d3bc_o.jpg"></a></li>
        <li><a href="#"><img src="https://c1.staticflickr.com/3/2842/34212555946_79037914ec_o.jpg"></a></li>
        <li><a href="#"><img src="https://c1.staticflickr.com/5/4191/34252891205_c8cc74a05b_o.jpg"></a></li>
        <li><p>点击更换背景图片</p></li>
      </ul>
    </div>
  </nav>
</div>

script.js

$(document).ready(function(){
  	$(".operationDiv input[type=checkbox]").bootstrapSwitch({
		onColor:"primary",
		offColor:"danger",
   size:"small",
		onSwitchChange: function(event, state){
		  if(state == true){
			  $(".barrageDiv").show();
		  }else{
			  $(".barrageDiv").hide();
		  }
		}
	});
  $(".colorDiv ul li a").click(function(){
    var img = $(this).find('img');
    var src = img.attr('src');
    
    var backgroundDiv = $(".backgroundDiv");
    backgroundDiv.css("background-image", "url(" + src + ")");
  });
  $("button[name=sendMessage]").click(function(){
    var messageContent = $("input[name=messageContent]").val();
    if(messageContent !== undefined && messageContent.trim() !== '' )
    {
      showMessage(messageContent);
      $("input[name=messageContent]").val('');
    }
  });
  $('input[name=messageContent]').keydown(function(e){
    if(e.keyCode==13){
      var messageContent = $("input[name=messageContent]").val();
      if(messageContent !== undefined && messageContent.trim() !== '' )
      {
        showMessage(messageContent);
        $("input[name=messageContent]").val('');
      }
    }
  });
  $("button[name=clearMessage]").click(function(){
    var barrageDiv = $(".barrageDiv");
    barrageDiv.empty();
  });
});

function showMessage(message){
  var colors = ["#ff0033","#ff6633","#44ff33","#4433ff","#0011aa","#0000ff","#11ff55","#ffffff","#000000","#00ff00"];
  var height = $(".barrageDiv").height();
  var level = height / 50;
  if(level > 0)
  {
    var random = parseInt(Math.random() * level) * 50;
    var random1 = parseInt(Math.random() * 10);
    var color = colors[random1];
    var $content = $("<div class='newMessage' style='color:" + color + ";top:" + random + "px;'><p>"+ message + "</p></div>").appendTo(".barrageDiv");
    //移动到最右侧，直接删除该元素
      $content.animate({ right : $('.barrageDiv').width() + $content.width() },8000,function(){
        $(this).remove();
      });
  }
}

scripts

<script src="https://files.lovelong.cn/common/ui/bootstrap/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="https://files.lovelong.cn/common/ui/bootstrap/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="https://files.lovelong.cn/common/ui/jQuery/jquery-3.2.1.min.js"></script>

style.css

div{
  margin:0;
  padding:0;
}
body{
  font-family: 'Microsoft Yahei',宋体,arial;
}
.backgroundDiv{
  background:#383838;
  background-image: url(https://c1.staticflickr.com/5/4176/34212555676_f14490d3bc_o.jpg);
  background-repeat: repeat;
  background-position: top;
  background-attachment: fixed;
  position: absolute;
  width: 100%;
  bottom: 0;
  top: 0;
  left: 0;
}
.barrageDiv{
  position: absolute;
  width: 100%;
  bottom: 50px;
  top: 0;
  left: 0;
}
.barrageDiv .newMessage{
  position: fixed;
  height:50px;
  line-height:50px;
  color: #11ff55;
  font-size: 25px;
  font-weight: 300;
  white-space:nowrap;
}
.operationDiv{
  background: rgba(130,138,230,0.5);
  border-top:5px solid #383838;
  padding: 8px 10px 8px 10px;
  position: absolute;
  width: 100%;
  /*height: 50px;*/
  bottom: 0;
  left: 0;
  margin:0px !important;
}
.operationDiv .leftDiv{
  float: left;
}
.operationDiv .rightDiv{
  float: right;
}
.operationDiv .colorDiv img{
  width: 34px;
  height: 34px;
}
.colorDiv .dropdown-menu{
  right:0;
  left:auto;
  padding: 5px;
  width: 190px;
}
.colorDiv .dropdown-menu li {
  display: inline-block;
}
.colorDiv .dropdown-menu li p{
  line-height: 35px;
  margin:0px 5px;
  font-family: 微软雅黑;
}
.colorDiv .dropdown-menu li a{
  padding: 3px !important;
}
.colorDiv .dropdown-menu li a image{
  width: 33px;
  height: 33px;
}
.bootstrap-switch-container span{
  height: 32px;
}

styles

<link href="https://files.lovelong.cn/common/ui/bootstrap/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://files.lovelong.cn/common/ui/bootstrap/bootstrap-switch/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />