我很久前在YAHOO上扣的代碼,兼容性很好,在Windows下的主流浏覽器中可以正常運行。
大家先不要急著下載代碼,你隨時都可以下,我們來分析下代碼(代碼中我已經寫了很詳細的注釋),要之其所以然,在解讀別人的代碼中學習提高自己,然後可以靈活運用,這個才是我將這個效果貼出來的主要目的,代碼如下:
scrollver.js
scrollVertical.prototype.scrollArea=null; // 滾動的區域
scrollVertical.prototype.scrollMsg=null; // 要滾動的內容
scrollVertical.prototype.unitHeight=0; // 單獨一行滾動內容的高度(程序中通過過的要滾動行的一個節點的offsetHeight獲得)
scrollVertical.prototype.msgHeight=0; // 整個滾動內容的高度
scrollVertical.prototype.copyMsg=null; // 復制滾動內容(程序中使用復制scrollMsg.innerHTML來獲得的)
scrollVertical.prototype.scrollValue=0; // 滾動的值
scrollVertical.prototype.scrollHeight=0; // 滾動高度
scrollVertical.prototype.isStop=true; // 停止滾動
scrollVertical.prototype.isPause=false; // 暫停滾動
scrollVertical.prototype.scrollTimer=null; // 滾動計時器
scrollVertical.prototype.speed=2000; // (默認)滾動的時間間隔2秒
/**
* @method isMoz - 判斷是否為Mozilla系列浏覽器
*/
scrollVertical.prototype.isMoz = function(){
return navigator.userAgent.toLowerCase().indexOf('gecko') > 0;
};
/**
* @method play - 滾動信息的處理方法(函數)
* @param {Object} o - 滾動類
*/
scrollVertical.prototype.play = function(o){
var s_msg = o.scrollMsg;
var c_msg = o.copyMsg;
var s_area = o.scrollArea;
var msg_h = o.msgHeight;
var anim = function(){
// 如果已經開始計時(間隔時間執行向上滾動),
// 就停止它(以免無限制執行,耗系統資源)。
if (o.scrollTimer) {
clearTimeout(o.scrollTimer);
}
// 如果暫停了滾動(鼠標放到了滾動層上)
// 開始以10毫秒的時間間隔運行滾動
if (o.isPause) {
o.scrollTimer = setTimeout(anim, 10);
return;
}
// 當顯示完所有信息後(這時滾動的距離就等於要滾動信息的高度msg_h)
// 這時又重新開始滾動,將滾動距離清零
if (msg_h - o.scrollValue <= 0) {
&nb