弹幕功能的实现

弹幕功能的实现

在做项目的时候用到了弹幕功能

弹幕的字体大小和颜色也都是随机的，代码奉上

html:     <div class="clearfix tool-switch-container" id="btn-barrage">
                <input id="switch" type="checkbox" class="switch" />
                <label for="switch" id="switch_label">弹幕</label>
           </div>

css:  .tool-switch-container {
		    position: relative;
		    float: left;
		    height: 20px;
		    margin-left: 10px;
		    margin-top: 6px;
		}
		switch {
		    display: none;
		}
		[type="checkbox"], [type="radio"] {
		    box-sizing: border-box;
		    padding: 0;
		}
		.tool-switch-container label {
		    /* margin-left: 122px; */
		    display: block;
		    background-color: #b5b5b5;
		    height: 100%;
		    width: 50px;
		    cursor: pointer;
		    border-radius: 24px;
		    position: relative;
		    font-size: 12px;
		    line-height: 22px;
		    color: #fff;
		    text-indent: 18px;
		    /* border: 1px solid #b5926a; */
		    padding-left: 8px;
		    margin-right: 2px;
		}
		

js:/** switch 弹幕 */
    $("#switch_label").on('click', function () {
        if (qbarrage && qbarrage == '1') {
            $('#switch').removeAttr("disabled"); //去除input元素的disabled属性  
            var check = $('#switch').is(':checked');
            if (!check) {
                $(this).text('弹幕');
                $(this).css("text-indent", "-17px");
            } else {
                $(this).css("text-indent", "17px");
            }
        } else {
            $('#switch').attr("disabled", "disabled") //将input元素设置为disabled  
        }
    })

function randomFontsize(min, max) {//弹幕的字体大小
    var str = "",
        range = min,
        arr = [14, 16, 18, 20, 22, 24, 26, 28];

    // 随机产生 
    range = Math.round(Math.random() * (max - min)) + min;
    for (var i = 0; i < range; i++) {
        var pos = Math.round(Math.random() * (arr.length - 1));
        str += arr[pos];
    }
    return str;
}


//获取随机颜色
var getRandomColor = function () {
    return '#' + ('00000' + (Math.random() * 0xffffff << 0).toString(16)).substr(-6);
}
var barrage = function (text) {
    var n = Math.floor(Math.random() * randomNum(1, 2) + 1) - 1;
    var textObj = $('<div class="barrage">' + text + '</div>');
    $("#container").append(textObj);
    moveObj(textObj);
    //setTimeout(barrage,3000);
}



//将传入的参数,也就是那obj，进行移动
var moveObj = function (obj) {
    var showscreen = $("#container"); //显示弹幕的div
    var showHeight = showscreen.height(); //此div的高度
    var showWidth = showscreen.width(); //此div的宽度
    var topMin = showscreen.offset().top; //68  此div距离文档的高度（header的高度）
    var topMax = topMin + showHeight; //整个文档的高度
    obj.css({  
        display: "inline",
        position: "absolute"
    });
    var begin = showWidth - obj.width(); //一开始的起点
    var num = randomNum(1, 1);
    var top = topMin * num;
    if (top > topMax - 120) {
        top = topMin * (1 + randomNum(1, 1) * 0.1);
    }
    var fontSize = randomFontsize(1, 1);  
    obj.css({ 
        left: begin,   
        top: top,
        'font-size': fontSize + 'px',
        color: getRandomColor(),    
        'font-size': 26 + 'px',
        color: '#fff',
        'font-weight': '600',
    });
    var time = 20800 + 10000 * Math.random();
    obj.animate({
        left: "-" + begin + "px"
    }, time, function () {
        obj.remove();
    });
}