本文实例为大家分享了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
