テンセントの1つの固定しない高さのニュースのスクロールの特効

//<![CDATA[
function runCode(id) {
var code = document.getElementById(id).value;
if (code != "") {
var newwin = window.open('', '', '');
newwin.opener = null;
newwin.document.write(code);
newwin.document.close();
}
}
//]]>
8月の最後の1日、急いでブログを補充します.最近見たテンセントの特効を貼って、書いたのはまあまあです.まず効果を見る.

 
重要なjs codeを見てください.

var $ = function (d){
    typeof d == "string" &&(d = document.getElementById(d)); 
    return $.fn.call(d);
};
$.fn = function (){	
	this.addEvent = function (sEventType,fnHandler){
		if (this.addEventListener) {this.addEventListener(sEventType, fnHandler, false);} 
	    else if (this.attachEvent) {this.attachEvent("on" + sEventType, fnHandler);} 
	    else {this["on" + sEventType] = fnHandler;}
	}
	this.removeEvent = function (sEventType,fnHandler){
		if (this.removeEventListener) {this.removeEventListener(sEventType, fnHandler, false);} 
	    else if (this.detachEvent) {this.detachEvent("on" + sEventType, fnHandler);} 
	    else { this["on" + sEventType] = null;}
	}
	return this;
};
var Class = {create: function() {return function() { this.initialize.apply(this, arguments); }}};
var Bind = function (obj,fun,arr){return function() {return fun.apply(obj,arr);}}
var Marquee = Class.create();
Marquee.prototype = {
  initialize: function(id,name,out,speed) {
    this.name = name;
	this.box = $(id);
	this.out  = 3;// , 
	this.speed = speed;
	this.d = 1;
	this.box.style.position = "relative";
	this.box.scrollTop = 0;
	var _li = this.box.firstChild;
	while(typeof(_li.tagName)=="undefined")_li = _li.nextSibling;
	this.lis = this.box.getElementsByTagName(_li.tagName);
	this.len = this.lis.length;	
	for(var i=0;i<this.lis.length;i++){
	    var __li = document.createElement(_li.tagName);
		__li.innerHTML = this.lis[i].innerHTML;
		this.box.appendChild(__li);//cloneNode
		if(this.lis[i].offsetTop>=this.box.offsetHeight)break;
	}
	this.Start();
	this.box.addEvent("mouseover",Bind(this,function(){clearTimeout(this.timeout);},[]));
	this.box.addEvent("mouseout",Bind(this,this.Start,[]));
  },
  Start:function (){
	  clearTimeout(this.timeout);
	  this.timeout = setTimeout(this.name+".Up()",this.out*1000)
  },
  Up:function(){
	  clearInterval(this.interval);
	  this.interval = setInterval(this.name+".Fun()",10);
  },
  Fun:function (){
      this.box.scrollTop+=this.speed;
	  if(this.lis[this.d].offsetTop <= this.box.scrollTop){
	    clearInterval(this.interval);
		this.box.scrollTop = this.lis[this.d].offsetTop;
		this.Start();
		this.d++;
	  }
	  if(this.d >= this.len + 1){
	     this.d = 1;
	     this.box.scrollTop = 0;
	  }
  }
};
$(window).addEvent("load",function (){
marquee = new Marquee("msg_weibo","marquee",1,2);
});

 
実現の構想は以前の文字のスクロールと同じで、すべて先に現在の容器に満ちていて、更にscrollTop++を通じて上へスクロールして、ただ彼は毎回スクロールする距離が固定的ではなくて、現在のスクロールメッセージの高さを取るのです.現在の表示領域の高さをスクロールするscrollTopとoffsetTop(親ノードの上部からの距離、ページの座標位置を取るのによく使われる)の違いから、if(this.lis[this.d].offsetTop<=this.box.scrollTop)で前のメッセージをスクロールしたかどうかを判断し、停止する必要があります.
 
ハイライトは$の書き方だと思います.通常Prototypeからobj||documentを外す.getElementById('objId')は、objにいくつかの方法をバインドしています.彼の役割は、モデル拡張StringやArrayなどのオブジェクトの方法に似ているのではないでしょうか.これは参考になる.
また、初期化時に容器を充填する際にdocumentを用いる.createElement->賦innerHTML->appendChildでやりますが、直接cloneNode(true)->appendChildのほうがいいと思います.そうでなければ、ご指摘を歓迎します.
 
主にやはり今月の穴を埋めて、ははは.