弹幕JS修改，可以作为留言的JS框架

这是一个在网上找的摸版例子，在这里稍微修改了一下。

首先看一下效果吧!

这就是弹幕显示的主要内容:颜色和图片都是随机选用，弹幕自动滚动到一端后自动消失。

主要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/

弹幕JS修改，可以作为留言的JS框架

猜你喜欢