真没想到你竟然是这种弹幕

最新推荐文章于 2021-12-14 10:16:03 发布
zsf53543831
最新推荐文章于 2021-12-14 10:16:03 发布
阅读量414
点赞数
CC 4.0 BY-SA版权
文章标签：弹幕
本文链接：https://blog.youkuaiyun.com/zsf53543831/article/details/50762331
<pre name="code" class="html"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        .container { width:90%;margin:50px auto;border:1px solid red;position:relative;overflow:hidden;}
        .floatDiv { position:absolute;display:none;} 
    </style>
    <script type="text/javascript">
        $(function () {
            //初始化弹幕区域
            var containerWidth = $(window).width() * 0.9;
            var containerHeight = $(window).height() * 0.8;
            $(".container").css({ "width": containerWidth, "height": containerHeight });
            //自定义 弹幕文字的大小 颜色 移动速度
            var colors = ["black", "red", "green", "grey", "blue", "orange"];
            var fontSize = [10, 12, 14, 16, 18, 20, 30, 40];
            var speed = [5000, 6000, 7000, 8000, 10000, 13000, 15000, 18000, 20000, ];
            var floatText = [];//弹幕文字
            for (var i = 0; i < 12; i++) {
                floatText[floatText.length] = { text: "真没想到你竟然是这种弹幕" + i, left: containerWidth, top: 0 };
            }
            var index = 0; //索引
            var loop = 0; //循环第几次
            var tops = []; //储存已被占用的高度值，如果文字还没有从最右侧边框中移出 则新出现的文字不能与这些文字重合 
            var interval = setInterval(function () {
                //无限循环
                if (index >= floatText.length) {
                    index = 0;
                    loop++;
                    //clearInterval(interval);
                }
                //else {
                var showFloatDivs = $(".container .floatDiv");
                //判断tops储存的div是否还存在 如果不存在则删除
                for (var i = 0; i < tops.length; i++) {
                    if (tops[i]["id"] && $(".container .floatDiv[id=" + tops[i]["id"] + "]").length == 0) {
                        tops.splice(i, 1);
                        i--;
                    }
                }
                //如果正在移动的文字还没出全部移出最后侧边框 则把这个文字的信息储存在tops中
                $.each(showFloatDivs, function (k, v) {
                    var w = $(v).width();
                    var l = Math.abs(Number(/\d+/g.exec($(v).css("left"))));
                    var t = Number(/\d+/g.exec($(v).css("top")));
                    var h = $(v).height();
                    if (w + l > containerWidth) {
                        var isExist = false;
                        //如果tops中已储存了当前元素 则不再储存
                        $.each(tops, function (key, value) {
                            if (value["id"]) {
                                isExist = true;
                            }
                        })
                        if (!isExist) {
                            tops[tops.length] = { "id": $(v).attr("id"), "top": t, "height": h };
                        }
                    }
                })
                //复制一个新的弹幕 并初始化文字 颜色 大小 位置
                var tempFloatDiv = $("#templetDiv").clone();
                $(".container").append(tempFloatDiv);
                var font_size = GetArrayRandomValue(fontSize);
                $(tempFloatDiv).css({ "left": floatText[index]["left"], "display": "block", "font-size": font_size, "color": GetArrayRandomValue(colors) }).attr("id", "container" + ((loop * floatText.length) + index)).html(floatText[index]["text"] + "_" + loop);
                $(tempFloatDiv).width((floatText[index]["text"].length + 4) * font_size);
                var currentTop;//随机出一个高度值
                var flag = true;//是否继续循环的标志
                var maxIndex = 0; //限制最大的循环次数
                var currentHeight = $(tempFloatDiv).height();//当前新加入的弹幕文字的高度
                while (flag && maxIndex <= 10) {
                    currentTop = Math.random() * (containerHeight - currentHeight);//随机高度值
                    if (tops.length == 0) {
                        flag = false;//如果tops没有储存限制高度 则flag=false 当前随机的高度值有效 不再循环
                    } else {
                        //把当前随机的高度值与tops中储存的已存在的高度 进行比较 ，如果没有重合即可用，如果有重合，则再次循环取随机值，最大循环次数为10 
                        for (var i = 0; i < tops.length; i++) {
                            if ((currentTop < tops[i]["top"] + tops[i]["height"] && currentTop >= tops[i]["top"]) || (currentTop + currentHeight <= tops[i]["top"] + tops[i]["height"] && currentTop + currentHeight > tops[i]["top"])) {
                                break;
                            } else if (i == tops.length - 1) {
                                flag = false;
                            }
                        }
                        maxIndex++;
                    }
                }
                //flag=true表明没找到合适的高度 则把当前添加的div删除
                if (flag) {
                    $(tempFloatDiv).remove();
                } else {
                    $(tempFloatDiv).css("top", currentTop);
                    $(tempFloatDiv).animate({ "left": -$(tempFloatDiv).width() }, GetArrayRandomValue(speed), function () {
                        //当文字飞出弹幕区域 则把飞出的弹幕文字删除 另外，如果tops中储存的有该div的信息 则一并删除
                        for (var i = 0; i < tops.length; i++) {
                            if ($(tempFloatDiv).attr("id") == tops[i]["id"]) {
                                tops.splice(i, 1);
                                i--;
                            }
                        }
                        $(tempFloatDiv).remove();
                    });
                }
                index++;
                //}
            }, 500);
            function GetArrayRandomValue(array) {
                return array[Math.floor(Math.random() * array.length)];
            }
        })
    </script>
</head>
<body>
        <div class="floatDiv" id="templetDiv"><span></span>
        </div>
        <div class="container">
            
        </div>
</body>
</html>