關於marquee，就不多說了，可以戳這里。
畢竟他是一個很古老的元素，現在的標准里頭也不推薦使用這個標簽了。但平時一些項目中會經常碰到這樣的效果，每次都是重新寫一遍，麻煩！
JS類實現marquee
今天倒弄了一個類，還不全，打個草稿吧~ 下次就湊合着用吧。
DEMO在這里，戳我
/** * @author 靖鳴君 * @email jingmingjun92@163.com * @description 滾動 * @class Marquee * @param {Object} */ var Marquee = function(){ this.direction = "top"; this.speed = 30; }; Marquee.prototype = { //initial init: function(obj, setttings){ this.obj = obj; this._createBox(); this.scroll(); if(settings){ settings.direction && (this.direction = settings.direction); settings.speed && (this.speed = settings.speed); } }, _createBox: function(){ //create inner box A this.iBox = document.createElement("div"); var iBox = this.iBox; with(iBox.style){ width = "100%"; height = "100%"; overflow = "hidden"; } iBox.setAttribute("id", "marqueeBoxA"); iBox.innerHTML = obj.innerHTML; //clone inner box B var iBox2 = iBox.cloneNode(true); iBox2.setAttribute("id", "marqueeBoxB"); //append to obj Box this.obj.innerHTML = ""; this.obj.appendChild(iBox); this.obj.appendChild(iBox2); }, //animation scroll: function() { var _self = this; this.timer = setInterval(function(){ _self._ani(); }, this.speed); }, //setInterval function _ani: function() { if(obj.clientHeight - obj.scrollTop <= 0){ obj.scrollTop = obj.offsetHeight - obj.scrollTop + 1; } else { obj.scrollTop++; console.log(obj.offsetHeight, obj.scrollTop); } }, stop: function(){ clearInterval(this.timer); }, start: function(){ this.scroll(); } };
gists地址：https://gist.github.com/barretlee/6095976
代碼寫的比較粗糙，下面說說這個思路：
BoxA和BoxB內容相同，當BoxA滾動離開外層盒子時，把scrollTop設置成，當前的scrollTop - BoxA的高度，記得再加上一個1.
思路很簡單，操作也很方便，我比較習慣用scrollTop來控制移動，有的人也喜歡用絕對定位和相對定位配合，但是這樣寫出來的插件兼容性不是很好，有些頁面定位元素太多，可能會造成插件的樣式亂套。
這個插件（樓主比較懶，還沒有寫完）的使用方式：
var marquee = new Marquee(), obj = document.getElementById("box"); marquee.init(obj);
對應的html代碼：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Demo</title> <style type="text/css"> #box { width: 150px; height: 200px; border:1px solid #EFEFEF; background: #F8F8F8; padding:0 20px; line-height:22px; overflow:hidden; } </style> </head> <body> <div id="box"> 我是靖鳴君1<br /> 我是靖鳴君2<br /> 我是靖鳴君3<br /> 我是靖鳴君4<br /> 我是靖鳴君5<br /> 我是靖鳴君1<br /> 我是靖鳴君2<br /> 我是靖鳴君3<br /> 我是靖鳴君4<br /> 我是靖鳴君5<br /> </div> </body> </html>
當然，給了幾個接口：
marquee.init(obj, { direction: "xx", //這個還沒寫，一般就是top和left吧~ speed: 30 });
補充一個css3下marquee的知識點
overflow:-webkit-marquee;//指定溢出時滾動。
-webkit-marquee-style:scroll | slide | alternate; //跑馬燈樣式，分三種。
scroll，從一端滾動到另一端，內容完全滾入（消失）時重新開始。
slide，從一端滾到另一端，內容接觸到另一端后，立馬重新開始。
alternate，內容不跑到顯示區域外，在里面來回碰壁反彈。這里主要用第一種。
-webkit-marquee-repetition:infinite | number;// 跑馬燈跑的次數，infinite 為
無限多次，不結束。或者可以用正整數設置滾動的次數。
-webkit-marquee-direction:up | down | left | right; //跑動的方向，這個要注
意結合實際情況，即實際你操作的標簽文本流溢出在哪個方向溢出。
-webkit-marquee-speed:slow | normal | fast;//跑動的速度設置。
實例：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Demo</title> <style type="text/css"> h1 { color:rgba(250,100,100,0.7); height:40px; line-height:40px; width:400px; overflow: -webkit-marquee; -webkit-marquee-style: scroll; -webkit-marquee-repetition: infinite; -webkit-marquee-direction: right; -webkit-marquee-speed:normal; border:1px #ccc solid; margin-top: 30px; } h1.left { -webkit-marquee-direction: left; } h1.up { -webkit-marquee-direction: up; } h1.down { -webkit-marquee-direction: down; } </style> </head> <body> <h1>我是靖鳴君，靖鳴君，我是靖鳴君，靖鳴君，我是靖鳴君</h1> <h1 class="up">我是靖鳴君，靖鳴君，我是靖鳴君，靖鳴君，我是靖鳴君</h1> <h1 class="left">我是靖鳴君，靖鳴君，我是靖鳴君，靖鳴君，我是靖鳴君</h1> <h1 class="down">我是靖鳴君，靖鳴君，我是靖鳴君，靖鳴君，我是靖鳴君</h1> </body> </html>
DEMO地址：http://qianduannotes.sinaapp.com/marquee/css3marquee.html （此屬性在后續新版本中已經不提供支持了 修改於2013/11/09）
這個還是蠻實用的~做下兼容性處理，我覺得，可以直接拿過來用：)