播放個視頻的時候看到很有趣的彈幕，想着前端能不能做個彈幕效果。彈幕是滾動的，所以首先想到了<marquee>標簽。但事實上，<marquee>標簽不是w3c的標准，只是主流的瀏覽器都支持。
這么做的一個考慮是，<marquee>標簽可以實現js的動畫效果，也就簡單一點。閑話不敘了，貼上代碼：引入了百度的jquery cdn加速，所以代碼不需要任何修改就可以跑起來。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
section{height:300px;width:800px;border:1px solid #930;}
.div0{width:800px;position:relative;border: 1px solid #C39}
.div1{width:800px;}
.div2{width:800px;position:absolute;left:0;top:20px;z-index:5}
marquee{width:800px;}
</style>
</head>
<body>
<section>
<h1>自己寫的最簡單的循環彈幕，利用marquee標簽</h1>
</section>
<div class="div0">
<div class="div1">
webpack是近期最火的一款模塊加載器兼打包工具，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模塊來使用和處理。
我們可以直接使用 require(XXX) 的形式來引入各模塊，即使它們可能需要經過編譯（比如JSX和sass），但我們無須在上面花費太多心思，因為 webpack 有着各種健全的加載器（loader）在默默處理這些事情，這塊我們后續會提到。
你可以不打算將其用在你的項目上，但沒有理由不去掌握它，因為以近期 Github 上各大主流的（React相關）項目來說，它們倉庫上所展示的示例已經是基於 webpack 來開發的，比如 React-Boostrap 和 Redux。
</div>
<div class ="div2">
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script>
$(document).ready(function() {
//tanmu函數,參數說明.content:彈幕內容;fontcolor:彈幕顏色;speed:運動速度，單位為px/s（每秒運動多少像素）;startTime:開始的時間，單位為毫秒;
function tanmu(content, fontColor, speed, startTime) {
function add(content, speed) {
var html = "";
html += "<marquee scrolldelay='1000' direction='left' scrollamount='" + speed + "' style='color:" + fontColor + "'>" + content + "</marquee>";
$(".div2").append(html);
}
setTimeout(add(content, speed), startTime);
//調用彈幕函數
}
tanmu("我來了1,我來了1,我來了1,我來了1,我來了1,","#f00",90,0);
tanmu("我來了2,我來了2,我來了2,我來了2,我來了2,","#0f0",100,1000);
tanmu("我來了3,我來了3,我來了3,我來了3,我來了3,","#00f",150,2000);
tanmu("我來了4,我來了4,我來了4,我來了4,我來了4,","#930",130,2500);
})
</script>
</body>
</html>
調用了setTimeout，所以會循環播放。