JS框架_(JQuery.js)網頁文字評論彈幕

時間 2019-11-08

標籤框架 jquery.js jquery 網頁文字評論欄目 JavaScript 简体版

原文原文鏈接

百度雲盤　　傳送門　　密碼：3azljavascript

jQuery網頁右下角文字評論彈幕效果css

<!DOCTYPE html>
<html>
<head>
<title>jQuery網頁右下角文字評論彈幕代碼</title>
<meta charset="utf-8">
<meta id="scale" content="initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport">

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/index.js"></script>

<style type="text/css">
    *{
        padding:0;
        margin:0;
    }
    a{
        text-decoration: none;
    }

    p {
      position: fixed;
      top: 50%;
      left: 0;
      right: 0;
      text-align: center;
      transform: translateY(-50%);
      font-size: 40px;
      font-weight: 900;
      color: white;
      text-shadow: 0 0 50px black;
      text-transform: capitalize;
      font-family: 'Roboto','Helvetica','Arial',sans-serif;
      letter-spacing: 5px;
    }

    .form-control{
        display: inline-block;
        width: auto;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }

    .btn{
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
    }

    .btn-primary {
        color: #fff;
        background-color: #337ab7;
        border-color: #2e6da4;
    }

    /*組件主樣式*/
    .overflow-text{
        display: block;
        white-space:nowrap;
        overflow:hidden; 
        text-overflow:ellipsis;
        opacity:0;
        clear: both;
        padding:3px 10px;
        border-radius: 10px;
        box-sizing: border-box;
        max-width: 100%;
        color:#fff;
        animation:colorchange 3s infinite alternate;
        -webkit-animation:colorchange 3s infinite alternate; /*Safari and Chrome*/
    }
    @keyframes colorchange{
        0%{
            color:red;
        }
        50%{
            color:green;
        }
        100%{
            color:#6993f9;
        }
    }
    
</style>

</head>
<body>

<p>Gary</p>

<center><br><br><br>
<button id="stop" class="btn btn-primary">中止</button>
<button id="open" class="btn btn-primary">彈</button>
<input type="text" class="form-control" name="" id="barrage_content" placeholder="添加彈幕內容"><button class="btn btn-primary" id="submit_barraget">發送</button>
</center>

<script type="text/javascript">

// 數據初始化
var Obj = $('body').barrage({
    data : data, //數據列表
    row : 5,   //顯示行數
    time : 1000, //間隔時間
    gap : 20,    //每個的間隙
    position : 'fixed', //絕對定位
    direction : 'bottom right', //方向
    ismoseoverclose : true, //懸浮是否中止
})
Obj.start(); 

//添加評論
$("#submit_barraget").click(function(){

    var val = $("#barrage_content").val();
    //此格式與dataa.js的數據格式必須一致
    var addVal = {
        href : '',
        text : val
    }
    //添加進數組
    Obj.data.unshift(addVal);
    alert('評論成功');

})

$("#open").click(function(){
    Obj.start(); 
})
$("#stop").click(function(){
    Obj.close();
})
</script>

</body>
</html>

index.html

    $.fn.barrage = function(opt){

        var _self = $(this);

        var opts = {   //默認參數
            data : [], //數據列表
            row : 5,   //顯示行數
            time : 2000, //間隔時間
            gap : 20,    //每個的間隙
            position : 'fixed', //絕對定位
            direction : 'bottom right', //方向
            ismoseoverclose : true, //懸浮是否中止
        }

        var settings = $.extend({},opts,opt); //合併參數
        var M = {},Obj = {}; 
        Obj.data = settings.data;
        M.vertical = settings.direction.split(/\s+/)[0]; //縱向
        M.horizontal = settings.direction.split(/\s+/)[1]; //橫向
        M.bgColors = ['#edbccc','#edbce7','#c092e4','#9b92e4','#92bae4','#92d9e4','#92e4bc','#a9e492','#d9e492','#e4c892']; //隨機背景色數組
        Obj.arrEle = []; //預計存儲dom集合數組
        M.barrageBox = $('<div id="barrage" style="z-index:999;max-width:100%;position:'+settings.position+';'+M.vertical+':0;'+M.horizontal+':0;"></div>'); //存全部彈幕的盒子
        M.timer = null; 
        var createView = function(){
            var randomIndex = Math.floor(Math.random() * M.bgColors.length);
            var ele = $('<a class="overflow-text" target="_blank" style="opacity:0;text-align:'+settings.direction.split(/\s+/)[1]+';float:'+settings.direction.split(/\s+/)[1]+';background-color:'+M.bgColors[randomIndex]+'"; href="'+(Obj.data[0].href ? Obj.data[0].href : "javascript:;")+'">'+Obj.data[0].text+'</a>');
            var str = Obj.data.shift();
            if(M.vertical  == 'top'){
                ele.animate({
                    'opacity' : 1,
                    'margin-top' : settings.gap,
                },1000)
                M.barrageBox.prepend(ele);
            }else{
                ele.animate({
                    'opacity' : 1,
                    'margin-bottom' : settings.gap,
                },1000)
                M.barrageBox.append(ele);
            }
            Obj.data.push(str);

            if(M.barrageBox.children().length > settings.row){

                M.barrageBox.children().eq(0).animate({
                    'opacity' : 0,
                },300,function(){
                    $(this).css({
                        'margin' : 0,
                    }).remove();
                })
            }
        }
        M.mouseClose = function(){
            settings.ismoseoverclose && (function(){

                M.barrageBox.mouseover(function(){
                    clearInterval(M.timer);
                    M.timer = null;
                }).mouseout(function(){
                    M.timer = setInterval(function(){ //循環
                        createView();
                    },settings.time)
                })

            })()
        }
        Obj.close = function(){
            M.barrageBox.remove();
            clearInterval(M.timer);
            M.timer = null;
        }
        Obj.start = function(){
            if(M.timer) return;
            _self.append(M.barrageBox); //把彈幕盒子放到頁面中
            createView(); //建立試圖並開始動畫
            M.timer = setInterval(function(){ //循環
                createView();
            },settings.time)
            M.mouseClose();
        }
        
        return Obj;
    }

index.js

var data = [
    {href : 'http://www.baidu.com',text : '百度'},
    {href : 'http://www.cnblogs.com/1138720556Gary/',text : 'Cynical丶Gary'},
    {href : '',text : '這是彈幕_1'},
    {href : '',text : '這是彈幕_2'},
    {href : '',text : '這是彈幕_3'}
]

data.js

做者：馮宇　　傳送門html

實現過程：java

CSSjquery

彈幕文字動畫效果web

    @keyframes colorchange{
        0%{
            color:red;
        }
        50%{
            color:green;
        }
        100%{
            color:#6993f9;
        }
    }

經過 @keyframes 規則，可以建立隨着彈幕出現時間改變彈幕顏色動畫api

　　0% 是動畫的開始時間，100% 動畫的結束時間數組

初始化彈幕app

var data = [
    {href : 'http://www.baidu.com',text : '百度'},
    {href : 'http://www.cnblogs.com/1138720556Gary/',text : 'Cynical丶Gary'},
    {href : '',text : '這是彈幕_1'},
    {href : '',text : '這是彈幕_2'},
    {href : '',text : '這是彈幕_3'}
]

href做爲參數連接，新建彈幕默認無連接dom

彈幕屬性

        var opts = {   //默認參數
            data : [], //數據列表
            row : 5,   //顯示行數
            time : 2000, //間隔時間
            gap : 20,    //每個的間隙
            position : 'fixed', //絕對定位
            direction : 'bottom right', //方向
            ismoseoverclose : true, //懸浮是否中止
        }

隨機背景色數組

        M.bgColors = ['#edbccc','#edbce7','#c092e4','#9b92e4','#92bae4','#92d9e4','#92e4bc','#a9e492','#d9e492','#e4c892'];

彈幕展現效果

        var createView = function(){
            var randomIndex = Math.floor(Math.random() * M.bgColors.length);
            var ele = $('<a class="overflow-text" target="_blank" style="opacity:0;text-align:'+settings.direction.split(/\s+/)[1]+';float:'+settings.direction.split(/\s+/)[1]+';background-color:'+M.bgColors[randomIndex]+'"; href="'+(Obj.data[0].href ? Obj.data[0].href : "javascript:;")+'">'+Obj.data[0].text+'</a>');
            var str = Obj.data.shift();
            if(M.vertical  == 'top'){
                ele.animate({
                    'opacity' : 1,
                    'margin-top' : settings.gap,
                },1000)
                M.barrageBox.prepend(ele);
            }else{
                ele.animate({
                    'opacity' : 1,
                    'margin-bottom' : settings.gap,
                },1000)
                M.barrageBox.append(ele);
            }
            Obj.data.push(str);

            if(M.barrageBox.children().length > settings.row){

                M.barrageBox.children().eq(0).animate({
                    'opacity' : 0,
                },300,function(){
                    $(this).css({
                        'margin' : 0,
                    }).remove();
                })
            }
        }

prepend()：在被選元素的開頭（仍位於內部）插入指定內容

animate() ：執行 CSS 屬性集的自定義動畫

shift() 方法：用於把數組的第一個元素從其中刪除，並返回第一個元素的值

當須要暫時的彈幕數量>最大展現數量(這裏是5)，那麼所有展示出來，不然經過opacity()方法，改變彈幕透明度

語法

鼠標放置彈幕上，彈幕中止滾動

        M.mouseClose = function(){
            settings.ismoseoverclose && (function(){

                M.barrageBox.mouseover(function(){
                    clearInterval(M.timer);
                    M.timer = null;
                }).mouseout(function(){
                    M.timer = setInterval(function(){ //循環
                        createView();
                    },settings.time)
                })

            })()
        }

經過.ismoseoverclose判斷鼠標是否懸停在彈幕上

　　M.timer = null使彈幕中止滾動

關閉彈幕

        Obj.close = function(){
            M.barrageBox.remove();
            clearInterval(M.timer);
            M.timer = null;
        }

開啓彈幕

        Obj.start = function(){
            if(M.timer) return;
            _self.append(M.barrageBox); //把彈幕盒子放到頁面中
            createView(); //建立試圖並開始動畫
            M.timer = setInterval(function(){ //循環
                createView();
            },settings.time)
            M.mouseClose();
        }

DOM

<script type="text/javascript">

// 數據初始化
var Obj = $('body').barrage({
    data : data, //數據列表
    row : 5,   //顯示行數
    time : 1000, //間隔時間
    gap : 20,    //每個的間隙
    position : 'fixed', //絕對定位
    direction : 'bottom right', //方向
    ismoseoverclose : true, //懸浮是否中止
})
Obj.start(); 

//添加評論
$("#submit_barraget").click(function(){

    var val = $("#barrage_content").val();
    //此格式與dataa.js的數據格式必須一致
    var addVal = {
        href : '',
        text : val
    }
    //添加進數組
    Obj.data.unshift(addVal);
    alert('評論成功');

})

$("#open").click(function(){
    Obj.start(); 
})
$("#stop").click(function(){
    Obj.close();
})
</script>