基于jquery实现弹幕效果

2020-05-29 07:17:29易采站长站整理

var colortxt = getReandomColor();
var topPos = generateMixed(3);

if(topPos > 500) {
topPos = 30;
}
var newtxt = '<p id="danmu" style="top:' + topPos + 'px; color:' + colortxt + '">' + $("#msg").val() + '</p>';
$(".ctxt").prepend(newtxt);
var addTextW = $(".ctxt").find("p").width();
$(".ctxt p").animate({
left: '-' + addTextW + 20 + "px"
}, 30000, function() {
$(this).hide();
});
$("#msg").val(" ");
});

});
//随机获取颜色值
function getReandomColor() {
return '#' + (function(h) {
return new Array(7 - h.length).join("0") + h
})((Math.random() * 0x1000000 << 0).toString(16))
}

//生成随机数据。n表示位数
var jschars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];

function generateMixed(n) {
var res = "";
for(var i = 0; i < n; i++) {
var id = Math.ceil(Math.random() * 9);
res += jschars[id];
}
return res;
}
</script>

</body>

</html>