您的位置：首页 > 其它

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

2016-02-28 22:52 253 查看 
<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"]) || (c
4000
urrentTop + 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>



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航