弹幕介绍:
是在网络上观看视频时弹出的评论性字幕。类似小说中行间彰显的夹批,视频中屏间飘过的评点叫做弹幕,原意指用大量或少量火炮提供密集炮击。而弹幕,顾名思义是指子弹多而形成的幕布,大量吐槽评论从屏幕飘过时效果看上去像是飞行射击游戏里的弹幕。
效果演示:
<script type="text/javascript"> //得到鼠标点击操作 $(".btn").click(function() { //得到文本框中的内容 var content = $(".input_text").html(); //alert(content); //得到弹幕显示的文本框 var hiai_label = $("<div class='animated bounce animated flip'>" + content + "</div>") //把用户输入的弹幕显示的文本框中 $(".hiai_content").append(hiai_label); //调用动画函数 hiai_play(); }); //动画函数 function hiai_play() { var wen_top = 0; $(".hiai_content").find("div").each(function() { //确定弹幕的文字的每个位置 var wen_left = $(".hiai_dm").width() - $(this).width(); //当前弹幕的高度 var wen_height = $(".hiai_dm").height(); wen_top = wen_top + 30; //判断弹幕不超过显示屏 if (wen_top > wen_height - 50) { wen_top = 0; } $(this).css({ left: wen_left, top: wen_top, color: rgbaColor() }); //给文字加上动画 $(this).animate({ left: "-" + wen_left + "px" }, 8000, function() { $(this).remove(); }); }); } //给文字添加随机颜色 function rgbaColor() { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return "rgb(" + r + "," + g + "," + b + ")"; }
源码下载:
百度网盘链接:https://pan.baidu.com/s/1Mnpe5X85PGRbvT4AS_UKAA
提取码:nzwy
评论抢沙发