js 实现简单的弹幕

来源:互联网 发布:淘宝行业层级 编辑:程序博客网 时间:2024/05/21 11:12

实现弹幕的简单js

function danmu(text){
var $p=$('<p>'+text+'</p>');//弹幕的初始化
var x=0;//控制弹幕的位置
var h=Math.random()*(parseInt('#danmu').css('height')-24);//控制弹幕高位于容器的高度
var num= Math.random()*1.5;
//控制颜色随机
var r=parseInt(Math.random()*(255+1));
var g=parseInt(Math.random()*(255+1));
var b=parseInt(Math.random()*(255+1));
var timer=setInterval(function(){
//此条件判断语句用控制每次打开弹幕都是从右面开始出现
if ($('#danmu').css("display")!="none") {
x+=num>0.5?num:num+0.5;
}else{
x=0;
}
$p.css({
"font-weight":"blod",
"font-size":"24px",
            "position":"absolute",
            "top":h,
            "color":rgb("+r+","+g+","+b+"),
            "left":1200-x,
            "white-space":"nowrap"
});
//当弹幕超出容器执行删除
$('#danmu').append($p);
if (parseInt($p.css("left"))-parseInt($p.width())) {
$p.remove();
clearInterval(timer);
timer=null;
}
},1);
}chrome
0 0