上代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
list-style: none;
}
body {
width: 1200px;
height: 540px;
}
.left{
width: 1000px;
height: 540px;
float: left;
}
.video {
width: 1000px;
height: 500px;
background-color: #cccccc;
line-height: 500px;
text-align: center;
color: black;
font-size: 22px;
float: left;
}
.video label {
cursor: pointer;
}
.danMu {
height: 40px;
width: 1000px;
background-color: gainsboro;
float: left;
}
.shuRu {
float: left;
height: 40px;
width: 600px;
text-align: center;
line-height: 40px;
}
.shuRu input {
height: 32px;
float: right;
}
.faShe button {
float: right;
width: 100px;
height: 40px;
background-color: #f90000;
text-align: center;
font-size: 22px;
line-height: 40px;
margin-right: 300px;
color: whitesmoke;
}
.danmuQiang {
float: right;
width: 200px;
height: 540px;
background-color: snow;
font-size: 12px;
}
span {
height: 40px;
position: absolute;
overflow: hidden;
color: #000;
font-size: 20px;
line-height: 1.5em;
cursor: pointer;
white-space: nowrap;
z-index: 999;
}
</style>
</head>
<body>
<div class="left">
<div class="video"><label>主播正在赶来,请先去看看其他直播间哦</label></div>
<div class="danMu" id="danMU">
<div class="shuRu"><input type="text" placeholder="请注意文明发言" id="text" size="35"></div>
<div class="faShe">
<button id="btn">发射</button>
</div>
</div>
</div>
<div class="danmuQiang">
<ul id="ul">
</ul>
</div>
</body>
</html>
<script src="js/jquery-1.12.4.js"></script>
<script>
$("#btn").click(function () {
var width = $("body").width();
var value = $("#text").val();
var span = $("<span></span>");
span.appendTo($(".video"));
span.text(value)
.css("color", color())
.css("top", height())
.css("left", width-$(".danmuQiang").width()-$(span).width())
.animate({"left": -$(span).width()}, 3000, function () {
$(this).remove()
});
if(value==""){
return;
}else{
$("<li></li>").text(value).prependTo("ul");
}
})
function color() {
var color = "";
var colors = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"];
for (var i = 0; i < 6; i++) {
var n = Math.ceil(Math.random() * 15);
color += "" + colors[n];
if (i == 5) {
return "#" + color;
}
}
}
function height() {
return Math.floor(Math.random() * 395);
}
$("#text").keyup(function (e) {
if (e.keyCode == 13) {
$("#btn").click();
}
})
</script>
完事~