<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<タイトル></タイトル>
</head>
<本文>
<script type="text/javascript">
var $ = 関数 (id) {
return "string" == ID の種類 ? document.getElementById(id) : id;
};
var クラス = {
作成: function() {
戻り関数() {
this.initialize.apply(this, 引数);
}
}
}
Object.extend = 関数(宛先, ソース) {
for (ソース内の var PROperty) {
宛先[プロパティ] = ソース[プロパティ];
}
返送先。
}
関数 addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} それ以外 {
oTarget["on" + sEventType] = fnHandler;
}
};
var Scroller = Class.create();
Scroller.prototype = {
初期化: function(idScroller, idScrollMid, options) {
var oScroll = this、oScroller = $(idScroller)、oScrollMid = $(idScrollMid);
this.heightScroller = oScroller.offsetHeight;
this.heightList = oScrollMid.offsetHeight;
if(this.heightList <= this.heightScroller) 戻り値;
oScroller.style.overflow = "非表示";
oScrollMid.appendChild(oScrollMid.cloneNode(true));
this.oScroller = oScroller;
this.timer = null;
this.SetOptions(オプション);
this.side = 1;//1 は上 -1 は下
スイッチ (this.options.Side) {
「ダウン」の場合:
this.side = -1;
壊す;
「上」の場合:
デフォルト ：
this.side = 1;
}
addEventHandler(oScrollMid , "mouSEOver", function() { oScroll.Stop(); });
addEventHandler(oScrollMid , "mouseout", function() { oScroll.Start(); });
if(this.options.PauseStep <= 0 || this.options.PauseHeight <= 0) this.options.PauseStep = this.options.PauseHeight = 0;
this.Pause = 0;
this.Start();
}、
// 設定プロパティ
SetOptions: 関数(オプション) {
this.options = {//默认值
ステップ: 1,//次回変更されるピクセル量
時間: 20,//速度(越大越ゆっくり)
Side: "up",//滚動方向:"up" が上、"down" が下
PauseHeight: 0,//間隔多高停止一回
PauseStep: 1000//停止時間(PauseHeight大以上0该パラメータ才有效)
};
Object.extend(this.options, オプション || {});
}、
//滚動
スクロール: function() {
var iScroll = this.oScroller.scrollTop、iHeight = this.heightList、time = this.options.Time、oScroll = this、iStep = this.options.Step * this.side;
if(this.side > 0){
if(iScroll >= (iHeight * 2 - this.heightScroller)){ iScroll -= iHeight; }
} それ以外 {
if(iScroll <= 0){ iScroll += iHeight; }
}
if(this.options.PauseHeight > 0){
if(this.Pause >= this.options.PauseHeight){
時間 = this.options.PauseStep;
this.Pause = 0;
} それ以外 {
this.Pause += Math.abs(iStep);
this.oScroller.scrollTop = iScroll + iStep;
}
} else { this.oScroller.scrollTop = iScroll + iStep; }
this.timer = window.setTimeout(function(){ oScroll.Scroll(); }, time);
}、
//始まり
開始: function() {
this.Scroll();
}、
// 停止
停止: function() {
clearTimeout(this.timer);
}
};
window.onload = function(){
new Scroller("idScroller", "idScrollMid",{ PauseHeight:25 });
}
</script>
<スタイル>
#idScroller *{マージン:0px;パディング:0px;}
#idScroller{行の高さ:25px;幅:100%;高さ:25ピクセル;オーバーフロー:非表示;ボーダー:1px ソリッド #000000;}
#idScroller ul{幅:100%}
#idScroller li{幅:20%; フロート:左;オーバーフロー:非表示;リストスタイル:なし;}
</スタイル>
<div id="idScroller">
<div id="idScrollMid">
<ul>
<li> <a href=" http://www.devdao.com/">www.devdao.com</a></li >
<li> <a href=" http://www.devdao.com/">www.devdao.com</a></li >
<li> <a href=" http://www.devdao.com/">www.devdao.com</a></li >
<li> <a href=" http://www.devdao.com/">www.devdao.com</a></li >
<li> <a href=" http://www.devdao.com/">www.devdao.com</a></li >
<li> <a href=" http://www.devdao.com/">www.devdao.com</a></li >
</ul>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>