本文实例为大家分享了js与Jquery技术实现表白弹幕,供大家参考,具体内容如下 js七夕表白弹幕效果简单版效果: 关键代码: <script> v
本文实例为大家分享了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>
--结束END--
本文标题: js实现七夕表白弹幕效果 jQuery实现弹幕技术
本文链接: https://www.lsjlt.com/news/132354.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0