这篇文章主要介绍“js怎么实现弹幕功能”，在日常操作中，相信很多人在js怎么实现弹幕功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”js怎么实现弹幕功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
本文实例为大家分享了js与jQuery技术实现表白弹幕，供大家参考，具体内容如下
js七夕表白弹幕效果简单版效果：
关键代码：
计算
安全
数据库
网络和加速
企业服务
<script>
var si;
function tangmu(){
clearInterval(si);
var text = document.getElementById("text");
var tangmu = document.getElementById("tangmu");
var textStyle="<font id=\"textStyle\">"+text.value+"</font>";
mathHeight = Math.round(Math.random()*tangmu.offsetHeight)+"px";
var textLeft=tangmu.offsetWidth+"px";
tangmu.innerHTML=textStyle;
var textStyleObj = document.getElementById("textStyle");
textStyleObj.style.left=textLeft;
textStyleObj.style.top=mathHeight;
var x=parseInt(textStyleObj.style.left);
si = setInterval("xunhuan("+x+")",100);
}
function xunhuan(left){
var textStyleObj = document.getElementById("textStyle");
textStyleObj.style.left=left;
var x=parseInt(textStyleObj.style.left);
if(x<textStyleObj.style.width){
document.getElementById("tangmu").innerHTML="";
clearInterval(si);
}else{
x-=18;
}
textStyleObj.style.left=x+"px";
}
</script>jQuery实现弹幕技术：
效果：
关键代码：
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
$(".showBarrage,.s_close").click(function () {
$(".barrage,.s_close").toggle("slow");
});
init_barrage();
})
//提交评论
$(".send .s_btn").click(function () {
var text = $(".s_text").val();
if (text == "") {
return;
}
var _lable = $("<div style='right:20px;top:0px;opacity:1;color:" + getRandomColor() + ";'>" + text + "</div>");
$(".mask").append(_lable.show());
init_barrage();
})
//初始化弹幕技术
function init_barrage() {
var _top = 0;
$(".mask div").show().each(function () {
var _left = $(window).width() - $(this).width();//浏览器最大宽度，作为定位left的值
var _height = $(window).height();//浏览器最大高度
_top += 75;
if (_top >= (_height - 130)) {
_top = 0;
}
$(this).css({left: _left, top: _top, color: getRandomColor()});
//定时弹出文字
var time = 10000;
if ($(this).index() % 2 == 0) {
time = 15000;
}
$(this).animate({left: "-" + _left + "px"}, time, function () {
$(this).remove();
});
}
);
}
//获取随机颜色
function getRandomColor() {
return '#' + (function (h) {
return new Array(7 - h.length).join("0") + h
})((Math.random() * 0x1000000 << 0).toString(16))
}
</script>到此，关于“js怎么实现弹幕功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
