隨着html中的標籤marquee不在被W3C作爲標準採納，在可遇見的未來也會慢慢的被各大瀏覽器拋棄，直至廢棄，爲什麼被廢棄呢，經過小雨我不辭辛苦的總結有以下幾種原因：
- marquee這傢伙是微軟自己創造出來的，現在火狐都支持了，它自己不幹了
- marquee的效果，必須要前一次滾動完成之後，纔會接着下一次，會留白很長一段時間，適合無限向上滾動，無限往左有點瑕疵，並且被部分瀏覽器廢棄，會出現兼容性問題
- 最重要的是不能暫停，不能暫停，不能暫停 — 功能不完善
- 搜到了這個啊 —> 就是以後html的規範，只是語意標籤，像原來具有樣式或者特效功能的標籤，比如
<em> <i> <strong>等等都會慢慢廢棄
理由夠充分吧，是不是被拋棄就合理了，那怎麼用js實現這個marquee效果呢，總結了一下，有三中方法：
- css定位，無限向左 left++
- 利用jquery的animate方法
- 利用jquery的scrollLeft方法
3個實現原理是啥呢，其實很簡單，只有結構不一樣，但是實現方法基本都是一樣的
咱們拿css3定位來說明這個例子，首先看html結構：
<div class="scroll_area"> <!--目標體-->
<div class="content"> <!-- 顯示容器 -->
<div class="scrolltxt"> <!-- 滾動體 -->
<span>秦時明月漢時關，萬里長征人未還1</span>
<span>秦時明月漢時關，萬里長征人未還2</span>
</div>
</div>
</div>
Demo結構
var obj = $('.scroll_area');
var dw = obj.find(".content").width();
var cw = obj.find(".scrolltxt").width();
var cx = 0;
1.首先複製一遍移動體
什麼是移動體，就是要滾動的整體，如果橫向滾動，則必須用內聯標籤，咱們這裏用span，然後span的父級div即類scrolltxt纔是整個移動體
2.製造滾動
什麼情況下才能滾動呢，當然是 — 當滾動體的寬度大於顯示容器的寬度 — 這樣我必須要滾起來，你才能看見全部啊
滾動體爲scrolltxt, 顯示容器爲content，即(".content").width() < (".scrolltxt").width()時才能滾動，否則，不滿一屏，當然不能滾動了
3.無限滾動
什麼時候才能讓滾動體無限滾動下去呢，其實無限滾動就是讓目標滾動到最右邊即滾動體本身的寬度時，在來一遍嘛，怎麼再來一遍這就需要一個技巧了，怎麼才能讓滾動體滾動到超了滾動體寬度了，還能滾動
延長滾動體-----------> 最簡單的就是製造假象，直接全盤複製一遍原滾動體的html，append到最後面，哇，簡直太聰明瞭
看代碼：
obj.find(".scrolltxt").eq(0).append(obj.find(".scrolltxt").eq(0).html());
無限滾動開始
延長是延長了，但是僅僅是製造假象，僅僅是爲了讓滾動體超過了原滾動體寬度了還能滾，但是作用僅僅如此而已，滾動超過了，還是要原角登場
所以啊，當滾動超過scrolltxt的寬度時，或者是滾動體的寬度減去顯示體的寬度，再加上容器寬度時，原滾動體復位，比較拗口吧，上個圖吧：
if (cw > dw) { //寬度超出當前content寬度才滾動
var scrollval = null;//滾動事件變量
obj.find(".scrolltxt").eq(0).append(obj.find(".scrolltxt").eq(0).html());
scrollval = setInterval(function () {
obj.find(".scrolltxt").eq(0).css({
"left": "-" + cx + "px"
})
if (cx > (cw - dw) + dw)
cx = 0;
cx ++;
}, 30);
好啦，到這裏就完美模擬出跑馬燈效果了，給大家也附上無限向上滾動，以及animate的實現方法，供大家參考
跑馬燈無限往左-animate
跑馬燈無限往上
跑馬燈無限向左-left