一个简单的弹幕
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-family: "微软雅黑";
font-size: 62.5%;
}
#box{
width: 1000px;
height: 600px;
}
#box1{
width: 75%;
height: 100%;
position: relative;
overflow: hidden;
background-color: #0099cc;
float: left;
}
#box2{
width: 25%;
height: 100%;
position: relative;
overflow: hidden;
background-color: #999;
float: right;
}
#box3 {
width: 100%;
height: 90%;
background-color: pink;
}
#box4{
width: 100%;
height: 10%;
text-align: center;
line-height: 60px;
}
#box4 h6{
float: left;
font-size: 14px;
position: relative;
top: -33px;
left: 3px;
}
span {
height: 40px;
position: absolute;
overflow: hidden;
color: #000;
font-size: 4em;
line-height: 1.5em;
cursor: pointer;
white-space: nowrap;
}
p{
font-size: 14px;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="box">
<div id="box1"></div>
<div id="box2">
<div id="box3"></div>
<div id="box4">
<h6>吐槽:</h6>
<input type="text" id="text">
<button id="btn">发射</button>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
$("#btn").click(function () {
//判断是否为空
if ($("#text").val().length==0)
return;
var span=$("<span></span>");
//随机颜色(r,g,b)
var r=Math.floor(Math.random()*255);
var g=Math.floor(Math.random()*255);
var b=Math.floor(Math.random()*255);
//随机top值
var top=Math.floor(Math.random()*600)-40;
$(span).text($("#text").val());
$(span).appendTo($("#box1")).css({"left":750,"top":top,"color":"rgb("+r+","+g+","+b+")"}).animate({"left":-span.width()},3000,"linear",function () {
$(this).remove()
})
$("<p></p>").text($("#text").val()).prependTo($("#box3"));
$("#text").val("")
});
$("#text").keyup(function (event) {
if (event.keyCode==13){
$("#btn").click();
}
})
</script>
</body>
</html>