HTML+CSS+jQuery实现弹幕技术

最新推荐文章于 2024-04-16 09:35:27 发布

雪莲的博客

最新推荐文章于 2024-04-16 09:35:27 发布

阅读量5.1k

点赞数 2

分类专栏：我的随记

我的随记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.barrage .screen{width:100%;height:100%;position:absolute;top:0px;right:0px;}
.barrage .screen .s_close{z-index:2;top:20px;right:20px;position:absolute;text-decoration:none;width:40px;height:40px;border-radius:20px;text-align:center;color:#fff;background:#000;line-height:40px;display:none;}
.barrage .screen .mask{position:relative;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity:1);z-index:1;}
.barrage{display:none;width:100%;height:100%;}
.barrage .screen .mask div{position:absolute;font-size:20px;font-weight:bold;white-space:nowrap;line-height:40px;z-index:40;}
.barrage .send{z-index:1;width:100%;height:55px;background:#000;position:absolute;bottom:0px;text-align:center;}
.barrage .send .s_text{width:600px;height:40px;line-height:10px;font-size:20px;font-family:"微软雅黑";}
.barrage .send .s_btn{width:105px;height:40px;background:#22B14C;color:#fff;}
</style>
</head>
<body>
<a href="#" class="showBarrage">打开弹幕</a>

<div class="barrage">
<div class="screen">
<a href="#" class="s_close">X</a>
<div class="mask">

</div>
</div>

<div class="send">
<input type="text" class="s_text"/>
<input type="button" class="s_btn" value="说两句"/>
</div>

<span class="s_close">X</span>
</div>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function(){
$(".showBarrage,.s_close").click(function(){
$(".barrage,.s_close").toggle("slow");
});
// init_animated();
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>
</body>
</html>

雪莲的博客

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+jQuery实现弹幕技术

.barrage .screen{width:100%;height:100%;position:absolute;top:0px;right:0px;}.barrage .screen .s_close{z-index:2;top:20px;right:20px;position:absolute;text-decoration:none;width:40px;height:40px;bor
复制链接

扫一扫