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

来源：互联网发布：win7 mac地址怎么查编辑：程序博客网时间：2024/06/10 09:00
<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>
0 0