您的位置：首页 > 其它
弹幕实现

2016-07-03 19:52 197 查看
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>弹幕演示</title>

<style type="text/css">
html,body{
margin:0px;
padding:0px;
width: 100%;
height:100%;
font-family: "微软雅黑";
font-size: 62.5%;
background: #ccc;
}
.boxDom {
width:100%;
height: 100%;
position: relative;
overflow: hidden;
}
.idDom {
width: 100%;
height: 60px;
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;
olor:#fff;
font-size: 2.4em;
}
.string {
width:300px;
height: 40px;
position: absolute;
overflow: hidden;
color:#000;
font-size: 4em;
line-height: 1.5em;
cursor: pointer;
whit
4000
e-space:nowrap;
}

</style>
</head>

<body>
<div class="boxDom" id="boxDom">
<div class="idDom" id="idDom">
<div class="content">
<p class="title">吐槽:</p>
<input type="text" class="text" id="text" />
<button type="button" class="btn" id="btn">发射</button>
</div>
</div>
</div>
</body>

<script language="javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript">
$(function(){
var pageW=parseInt($(document).width());
var pageH=parseInt($(document).height());
var boxDom=$("#boxDom");
var btnDom=$("#btn");
var Top,Right;
var width;
width=pageW;
var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"];
btnDom.bind("click",auto);
document.onkeydown=function(e){
if(e.keyCode == 13){
auto();
}
}
function auto(){
var creSpan=$("<span class='string'></span>");
var text=$("#text").val();
creSpan.text(text);
$("#text").val("");
Top=parseInt(pageH*(Math.random()));
var num=parseInt(colorArr.length*(Math.random()));
if(Top>pageH-90){
Top=pageH-90;
}
creSpan.css({"top":Top,"right":-300,"color":getRandomColor()});
boxDom.append(creSpan);
var spanDom=$("#boxDom>span:last-child");
spanDom.stop().animate({"right":pageW+300},10000,"linear",function(){
$(this).remove();
});
}
function getRandomColor(){
return '#' + (function(h){
return new Array(7 - h.length).join("0") + h
})((Math.random() * 0x1000000 << 0).toString(16));
}
});
</script>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航