Skip to content

Instantly share code, notes, and snippets.

@denisding
Last active April 25, 2017 13:58
Show Gist options
  • Save denisding/da170cccf6f4580a64f261bf5d713679 to your computer and use it in GitHub Desktop.
Save denisding/da170cccf6f4580a64f261bf5d713679 to your computer and use it in GitHub Desktop.
bullet-screen
<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>
$(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();
});
}
}
<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>
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;
}
<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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment