jQuery功能确實強大，雖然用起來不熟練但是在百度大法的幫助下還是挺好使的，今天便用它實作了一個彈幕牆。
上張成果圖，頁面沒用心寫，有點辣眼睛
界面制作就不啰嗦了，後面會放上代碼，先講一下關鍵技術。
實作思路：點選發送彈幕，就會将輸入的值儲存進一個數組裡，并且将目前輸入的在彈幕顯示框顯示出來，同時背景也一直從該數組中每隔一段時間随機抽取一條記錄顯示出來。點選關閉彈幕會清空彈幕牆并且停止背景的讀取，同時将按鈕上的字變成啟動彈幕。而在彈幕牆關閉的時候點選發送彈幕，也會啟動彈幕牆。
BUG們：
1、彈幕牆裡每一條記錄的div必須設定為absolute。如果不設定，則不能使用定位，不友善彈幕的移動。如果設定為relative，一開始的話會相對于上一條彈幕來定位，影響使用效果。
2、彈幕進入彈幕牆最左邊後必須将這一條彈幕的div從彈幕牆的div中清楚，否則彈幕将積壓在彈幕牆左側不可見處，等到後面會發現彈幕都不動了，因為都擠在一塊了。
關鍵技術：
1、随機顔色：這個目前發現的最好的方法是
var getRandomColor = function(){
return '#'+('00000'+(Math.random()*0xffffff <<0).toString(16)).substr(-6);
} 解釋一下：Math.random()就不解釋了，乘以0xffffff是取0-ffffff中間的某一個值，但是這個娶不到白色，要白色的話就需要将0xffffff換成0x1000000，但是因為我的背景是白色就去掉白色了。“<<0“的作用是取整。前面的5個0是預設在這個随機數前面加上5位，因為6位随機數的可能不足6位，在給顔色指派的話不滿6位就會有點問題。最後的substr就不用解釋了。哦對，to/string(16)是轉換成16進制。
覺得我沒說清楚的請看，我就是參考這兒的：http://www.jb51.net/article/35931.htm
2、背景持續讀取：沒有簡單的用死循環，用了一個很巧妙的方法——遞歸。
var runDanMu = function(){
......
setTimeout(runDanMu,3000);
} 并在
$(document).ready(function(){});
裡調用該函數。
下面放完整代碼：
HTML
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>danmu</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<center><h1>YinyouPoet Danmu Wall</h1></center>
<div class="danmuShow">
</div>
<div class="submit">
<center>
<input id="comments" type="text" name="comments" placeholder="輸入文字">
<button id="submit">發送彈幕</button>
<button id="change">關閉彈幕</button>
</center>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html> CSS
*{
padding:0;
margin: 0;
}
.body{
}
.danmuShow{
position: relative;
margin-top: 20px;
height: 400px;
margin-left: 20px;
margin-right: 20px;
border: 1px #ccc solid;
font-size: 30px;
overflow: hidden;
}
.submit{
margin-top: 20px;
}
#comments{
font-size: 1.5em;
width: 500px;
}
#submit{
font-size: 1.5em;
background: #f1c943;
}
#change{
font-size: 1.5em;
background: #ff5231;
} js
var arr = []; //用來儲存彈幕資料的數組
var start = true; //用來判斷是否需要開啟彈幕
$(document).ready(function(){
/*console.log($("#submit").html());
$("#submit").html("新按鈕");*/
var showscreen = $(".danmuShow"); //顯示彈幕的div
var showHeight = showscreen.height(); //此div的高度
var showWidth = showscreen.width(); //此div的寬度
//點選發送彈幕按鈕
$("#submit").click(function(){
var damutext = $("#comments").val(); //擷取發送值
$("#comments").val(""); //清空發送區
console.log(damutext);
arr.push(damutext); //将值放入資料數組中
var textObj = $("<div>"+damutext+"</div>");
showscreen.append(textObj);
console.log("textObj:"+textObj.html());
moveObj(textObj); //寫在後面的 函數
if(start == false){
start = true;
$("#change").html("關閉彈幕");
runDanMu(); //開啟彈幕
}
});
//關閉、開啟彈幕按鈕點選事件
$("#change").click(function(){
if(start == true){ //如果點選關閉彈幕
start = false;
$("#change").html("開啟彈幕");
showscreen.empty();
}
else if(start == false){
start = true; //如果點選開啟彈幕
$("#change").html("關閉彈幕");
runDanMu(); //開啟彈幕
}
});
var topMin = showscreen.offset().top;
var topMax = topMin+showHeight;
//console.log("最小高"+topMin);
//console.log("最大高"+topMax);
var top = topMin;
//将傳入的參數,也就是那obj，進行移動
var moveObj = function(obj){
obj.css({
display: "inline",
position:"absolute"
});
var begin = showscreen.width() - obj.width(); //一開始的起點
top+=50;
if(top > topMax-50){
top = topMin;
}
//console.log("showscreenWidth"+showscreen.width());
//console.log("objWidth",obj.width());
console.log("begin:"+begin);
console.log("top:"+top);
console.log("obj"+obj);
obj.css({
left:begin,
top:top,
color:getRandomColor()
});
var time = 20000 + 10000*Math.random();
obj.animate({
left:"-"+begin+"px"
},time,function(){
obj.remove();
});
}
//擷取随機顔色的最進階寫法 http://www.jb51.net/article/35931.htm
var getRandomColor = function(){
return '#'+('00000'+(Math.random()*0xffffff <<0).toString(16)).substr(-6);
}
var runDanMu = function(){
if(start == true){
if(arr.length > 0){
var n = Math.floor(Math.random()* arr.length + 1)-1;
var textObj = $("<div>"+arr[n]+"</div>");
showscreen.append(textObj);
//console.log("loop:"+textObj.html());
moveObj(textObj);
}
}
setTimeout(runDanMu,3000);
}
jQuery.fx.interval = 50;
runDanMu();
}); ![jQuery實作百度搜尋框[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)