超简单的jQuery弹幕,支持IE8!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超简单版弹幕</title>
<style type="text/css">
*{padding: 0;margin: 0;box-sizing: border-box;}
.con{
width: 100%;
margin: 0 auto;
}
.box{
width: 1200px;
height: 500px;
background: #D9D9D9;
margin-top: 50px;
position: relative;
overflow: hidden;
margin: 50px auto 0;
}
.box h3{
text-align: center;
line-height: 500px;
}
.box .dm{
position: absolute;
display: table;
}
.ipt{
width: 1200px;
margin: 0 auto;
margin-top: 10px;
position: relative;
border: 1px solid #999;
}
.ipt input{
border: none;
text-indent: 10px;
width: 100%;
padding: 10px 0;
}
.ipt button{
position: absolute;
border: none;
top: 0;
right: 0;
height: 35px;
padding: 0 30px;
}
</style>
</head>
<body>
<div class="con">
<div class="box">
<h3>弹幕区域</h3>
</div>
<div class="ipt">
<input id="ipt" type="text" name="" id="" value="" placeholder="请输入弹幕" />
<button id="btn_fs">发送</button>
</div>
</div>
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//点击发送
$("#btn_fs").on("click",function(){
send()
});
//回车发送
$("#ipt").on("keydown",function(e){
if (e.keyCode === 13) {
send()
}
})
//发送
function send(){
if ($("#ipt").val() != "" && $("#ipt").val().length<= 15) {
createEle();
$("#ipt").val("")
}else{
alert("弹幕不能为空或者不能超过15个字符")
}
}
//创建元素
function createEle(){
var sjs = Math.ceil(Math.random()*$(".box").height()) //弹幕高度的随机数
var spanEle = $("<span class='dm'></span>"); //创建span元素
spanEle.html($("#ipt").val()) //追加文本内容
$(".box").append(spanEle) //追加到box
spanEle.css("right",-spanEle.width()+"px"); //设置css属性,right
spanEle.css("top",sjs+"px") //设置css属性,top
roll(spanEle) //调用弹幕,将元素传参,进行弹幕
};
//弹幕滚动
function roll(ele){
var num = -ele.width(); //span元素的宽
var w = $(ele).width(); //span元素的宽
setInterval(function(){
var left = $(ele).offset().left; //span元素的left值
num++;
if (left<= -w) { //判断left是否小于span的宽
clearInterval() //清除定时器
$(ele).remove() //清除span
return
}
$(ele).css("right",num+"px");
},10)
}
</script>
</body>
</html>
超简单的jQuery弹幕,像弹幕颜色,字体大小,速度变化等等一些骚操作,请自行添加
我本布衣,一介码农,路漫漫其修远兮,道阻且长,可是——我们正青春!