运行效果：
代码下载：
test.htm (4372)
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
<script type="text/javascript">
var $ = function(id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
create : function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function(destination, source) {
for ( var property in source) {
destination[property] = source[property];
}
return destination;
}
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
var Scroller = Class.create();
Scroller.prototype = {
initialize : function(idScroller, idScrollMid, options) {
var oScroll = this, oScroller = $(idScroller), oScrollMid = $(idScrollMid);
this.heightScroller = oScroller.offsetHeight;
this.heightList = oScrollMid.offsetHeight;
if (this.heightList <= this.heightScroller)
return;
oScroller.style.overflow = "hidden";
oScrollMid.appendChild(oScrollMid.cloneNode(true));
this.oScroller = oScroller;
this.timer = null;
this.SetOptions(options);
this.side = 1;//1是上 -1是下
switch (this.options.Side) {
case "down":
this.side = -1;
break;
case "up":
default:
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 : function(options) {
this.options = {//默认值
Step :1,//每次变化的px量
Time :20,//速度(越大越慢)
Side :"up",//滚动方向:"up"是上，"down"是下
PauseHeight :0,//隔多高停一次
PauseStep :1000
//停顿时间(PauseHeight大于0该参数才有效)
};
Object.extend(this.options, options || {});
},
//滚动
Scroll : 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;
}
} else {
if (iScroll <= 0) {
iScroll += iHeight;
}
}
if (this.options.PauseHeight > 0) {
if (this.Pause >= this.options.PauseHeight) {
time = this.options.PauseStep;
this.Pause = 0;
} else {
this.Pause += Math.abs(iStep);
this.oScroller.scrollTop = iScroll + iStep;
}
} else {
this.oScroller.scrollTop = iScroll + iStep;
}
this.timer = window.setTimeout( function() {
oScroll.Scroll();
}, time);
},
//开始
Start : function() {
this.Scroll();
},
//停止
Stop : function() {
clearTimeout(this.timer);
}
};
window.onload = function() {
new Scroller("idScroller", "idScrollMid", {
PauseHeight :25
});
}
</script>
<style>
#idScroller * {
margin: 0px;
padding: 0px;
}
#idScroller {
line-height: 25px;
width: 500px;
height: 50px;
overflow: hidden;
border: 1px solid #000000;
}
#idScroller ul {
width: 100%
}
#idScroller li {
width: 50%;
float: left;
overflow: hidden;
list-style: none;
}
</style>
<div id="idScroller">
<div id="idScrollMid">
<ul>
<li><a href="http://shundebk.cn/">111111111111111111111</a></li>
<li><a href="http://shundebk.cn/">211111111111111111111</a></li>
<li><a href="http://shundebk.cn/">311111111111111111111</a></li>
<li><a href="http://shundebk.cn/">411111111111111111111</a></li>
<li><a href="http://shundebk.cn/">511111111111111111111</a></li>
<li><a href="http://shundebk.cn/">611111111111111111111</a></li>
</ul>
<div style="clear: both;"></div>
</div>
</div>
</body>
</html>
2008-07-26_070257.gif test.htm 
