由於我在項目上面的首頁上需要實現一個彈幕小功能，需要不斷顯示服務器中返回的數據，這裏就記錄一下JS的具體實現
以下的代碼實現
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>彈幕示例</title>
<style type="text/css">
html,body{
background:#efefef;
height:100%;
}
div.mask{
position:fixed;
width:100%;
height:100px;
/*background:rgba(0,0,0,0.8);*/
opacity:0.5;
bottom:0;
left:0px;
}
div.bottom{
width:100%;
height:77px;
background:linear-gradient(#ccc,#4a4a4a);
position:fixed;
bottom:0px;
left:0px;
text-align:center;
line-height:77px;
}
div.bottom input.content{
width:50%;
min-width: 200px;
height:37px;
border:none;
border-radius:10px 0px 0px 10px;
font-size:16px;
padding:0 10px;
outline:none;
}
div.bottom a.send{
background-color:green;
color:#fff;
display:inline-block;
width:100px;
height:38px;
line-height:37px;
text-align:center;
position:relative;
left:-10px;
top:2px;
border-radius:0px 10px 10px 0px;
text-decoration:none;
font-family:'Microsoft Yahei';
}
div.mask a.button{
width:30px;
height:30px;
border-radius:50%;
background-color:#4181ff;
color:#fff;
position:fixed;
bottom:60px;
right:20px;
text-align:center;
line-height:30px;
font-size:20px;
font-family:'Microsoft Yahei';
border:1px solid #fff;
text-decoration:none;
cursor:pointer;
}
div.text{
color:white;
position:fixed;
right:0px;
font-size:16px;
white-space: nowrap;
background-color: #1b1b1b;
padding: 6px 20px;
border: 1px #1b1b1b solid;
border-radius: 30px;
}
</style>
</head>
<body>
<button class="danmu">打開彈幕</button>
<div class="mask">
<a href="#" rel="external nofollow" rel="external nofollow" class="button">X</a>
</div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
//模擬數據
var danmuArr = ['張先生：效果非常好','李先生：質量好，價格低','吳先生：希望繼續保持合作關係','陳先生：合作愉快'];
//這裏是獲取Java中session的數據
<!-- <% -->
<!-- var danmuArr = new Array(); -->
<!-- List<String> list = (List)session.getAttribute("aa"); -->
<!-- for(String str : list){ -->
<!-- %> -->
<!-- danmuArr.push("<%=str%>"); -->
<!-- <% -->
<!-- } -->
<!-- %> -->
//
var i = 0;
var intervarCount;//setInterval函數的返回值，用來關閉方法
//頁面加載完成後執行
window.onload = function () {
run()
};
function run() {
//每隔三秒執行一次
intervarCount = window.setInterval("autoDanmu(danmuArr[i])", 3000);
}
//關掉clearInterval方法
$('.button').click(function () {
$('div.mask').fadeOut(500);
clearInterval(intervarCount);
});
//重新打開彈幕
$(".danmu").click(function () {
$('div.mask').fadeIn(500);
run();
});
//彈幕出現的具體位置，我的固定在底部
function autoDanmu(text) {
var content = $("<div class='text'>" + text + "</div>");
//獲取隨機位置
var Rand = Math.random();
var top = 10 + Math.round(Rand * 40) + "px";
content.css("bottom", top);
$(".mask").append(content);
content.animate({right: $(document.body).width() + 100}, 8000, function () {
$(this).remove();
});
i++;
//執行完最後一條重置爲0，繼續重頭開始
if (i + 1 > danmuArr.length) {
i = 0;
}
}
</script>
</body>
</html>
注意：這裏只是粗略效果，如果時間太快和數據太多，這可能出現重疊的情況，如果要避免這種情況，需要分一下層