这是一个在网上找的摸版例子,在这里稍微修改了一下。
首先看一下效果吧!
这就是弹幕显示的主要内容:颜色和图片都是随机选用,弹幕自动滚动到一端后自动消失。
主要JS代码如下:
(function($) {$.fn.barrager = function(barrage) {
barrage = $.extend({
close:true,
bottom: 0,
max: 10,
speed: 8,
IsWhile:true,
color: '#fff',
old_ie_color : '#000000'
}, barrage || {});
barrage.speed = Math.floor(Math.random()*15+30);
var time = new Date().getTime();
var barrager_id = 'barrage_' + time;
var id = '#' + barrager_id;
var div_barrager = $("<div class='barrage' id='" + barrager_id + "'></div>").appendTo($(this));
var window_height = $(window).height() - 200;
var this_height = (window_height > this.height()) ? this.height() : window_height;
var window_width = $(window).width()+500;
var this_width = (window_width > this.width()) ? this.width() : window_width;
var bottom = (barrage.bottom == 0) ? Math.floor(Math.random() * this_height) : barrage.bottom;
div_barrager.css("bottom", bottom+100 + "px");
div_barrager_box = $("<div class='barrage_box cl'></div>").appendTo(div_barrager);
if(barrage.img){
div_barrager_box.append("<a class='portrait z' href='javascript:;'></a>");
var img = $("<img src='' >").appendTo(id + " .barrage_box .portrait");
var imgzui = Math.floor(Math.random()*10+1);
img.attr('src', barrage.img+imgzui+'.png');
}
div_barrager_box.append(" <div class='z p'></div>");
if(barrage.close){
div_barrager_box.append(" <div class='close z'></div>");
}
var content = $("<a title='' href='' target='_blank'></a>").appendTo(id + " .barrage_box .p");
content.attr({
'href': barrage.href,
'id': barrage.id
}).empty().append(barrage.info);
var numc = 0;
var colora = ['red','black','green'];
if(navigator.userAgent.indexOf("MSIE 6.0")>0 || navigator.userAgent.indexOf("MSIE 7.0")>0 || navigator.userAgent.indexOf("MSIE 8.0")>0 ){
content.css('color', barrage.old_ie_color);
}else{
numc = Math.floor(Math.random()*3);
content.css('color', colora[numc]);
}
div_barrager.find(".barrage_box").css('background-color', Color());
function Color(){
this.r = Math.floor(Math.random()*255);
this.g = Math.floor(Math.random()*255);
this.b = Math.floor(Math.random()*255);
return 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)';
}
var i = 0;
div_barrager.css('margin-right', 0);
if (barrage.IsWhile) {
$(id).stop(true).animate({right:this_width},barrage.speed*1000,function(){
$(id).remove();
});
} else {
$(id).animate({right:this_width},barrage.speed*1000,function(){
$(id).remove();
});
}div_barrager_box.mouseover(function() {
$(id).stop(true);
});div_barrager_box.mouseout(function() {
$(id).animate({right:this_width},barrage.speed*1000,function(){
$(id).remove();
});
});$(id+'.barrage .barrage_box .close').click(function(){
$(id).remove();
})
}
$.fn.barrager.removeAll=function(){
$('.barrage').remove();
window.clearInterval();
}})(jQuery);
主要html代码如下:
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<title>提示</title>
<script src="jquery-3.1.0.min.js"></script>
<script src="clicktext.js"></script><link rel="stylesheet" type="text/css" href="liuyan/static/css/style.css" />
<link rel="stylesheet" type="text/css" href="liuyan/dist/css/barrager.css">
<link rel="stylesheet" type="text/css" href="liuyan/static/pick-a-color/css/pick-a-color-1.2.3.min.css">
<link type="text/css" rel="stylesheet" href="liuyan/static/syntaxhighlighter/styles/shCoreDefault.css" />
<link type="text/css" rel="stylesheet" href="liuyan.css" />
<script type="text/javascript" src="liuyan/static/js/tinycolor-0.9.15.min.js"></script>
<script type="text/javascript" src="liuyan/dist/js/jquery.barrager.js"></script>
<link rel="stylesheet" href="liuyan/js/dist/css/barrager.css">
<style>
body {
height: 100%;
width: 100%;
position: absolute;
overflow-x: hidden;
}
</style>
<script>
$(function(){
for (var i= 0;i<30;i++) {
var item = {
img:"liuyan/static/img/xuanfu",
info: '弹幕文字信息', //文字
href: 'http://http://lhylyw.ngrok.xiaomiqiu.cn', //链接
close: true, //显示关闭按钮
speed: 6, //延迟,单位秒,默认6
/*bottom: 70, //距离底部高度,单位px,默认随机 */
color: '#fff', //颜色,默认白色
old_ie_color: '#000000', //ie低版兼容色,不能与网页背景相同,默认黑色
}
$('body').barrager(item);
}
})
</script>
</head>
<body>
</body></html>
注意需要引入Jquery插件哟!
文件下载地址 :https://download.csdn.net/download/qq_31491923/10794375
更多资源免费下载: http://lhylyw.ngrok.xiaomiqiu.cn/