代码如下,就是容器里面的内容可以横向滚动,但现在是鼠标在整个容器当中晃动的时候触发的滚动方法,我想改成用两个按钮控制(两个链接也可以),并且滚动速度可以变成参数配置,望高手帮我改一下代码,谢谢!<!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=utf-8" />
<title>mScrollBox</title>
<style type="text/css">
<!--
/* Common Style */
* {padding: 0; margin: 0}
body {margin: 3em; font: 12px Tahoma; background: #EAEAEA; color: #333333; line-height: 20px}
input, textarea {font: 12px Tahoma; color: #666666; padding: 2px; border: solid 1px #DBDBDB}
textarea {padding: 5px; line-height: 20px}
p {margin: 1em 0}
ul {}
li {height: 1%; overflow: hidden; list-style-type: none}
a {color: #666666; text-decoration: none}
a:hover {color: #333333}
.r {float: right}
.l {float: left}
.b {font-weight: bold}
.gray {color: #666666; margin-top: 8px}
.light {color:#FF6600; margin: 0 5px}
.case {display: block; padding: 0 2em 2em 2em; border: solid 1px #EAEAEA; background: #FFFFFF; margin-bottom: 2em; height: 1%; overflow: hidden}
.title {display:block; padding: .5em 2em .5em 1em; margin: 0 -2em 2em -2em; font-weight: bold; color: #000000; background: #FAFAFA; border-bottom: solid 1px #EAEAEA}
.call {display:block;}
.key {display: block; width: 6em; float: left}
.type {display: block; width: 6em; float: left}
.info {padding-left: 2em}
.demo {margin-bottom: 2em}
/* mScrollBox Style */
.itemList {height: 150px; overflow: hidden; line-height: 23px}
.itemList2 {width: 95%; height: 150px; overflow: hidden; white-space: nowrap}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
// 这里都是公用函数
var
// 获取元素
$ = function(element) {
return (typeof(element) == 'object' ? element : document.getElementById(element));
},
// 判断浏览器
brower = function() {
var ua = navigator.userAgent.toLowerCase();
var os = new Object();
os.isFirefox = ua.indexOf ('gecko') != -1;
os.isOpera = ua.indexOf ('opera') != -1;
os.isIE = !os.isOpera && ua.indexOf ('msie') != -1;
os.isIE7 = os.isIE && ua.indexOf ('7.0') != -1;
return os;
},
// 获取鼠标位置
getXY = function (e) {
var XY;
if(brower().isIE) {
//XY = new Array(event.clientX, event.clientY);
var scrollPos;
if (typeof window.pageYOffset != 'undefined') {
   scrollPos = {x : window.pageXOffset, y : window.pageYOffset};
}else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
   scrollPos = {x : document.documentElement.scrollLeft, y : document.documentElement.scrollTop};
}else if(typeof document.body != 'undefined') {
   scrollPos = {x : document.body.scrollLeft, y : document.body.scrollTop};
}
XY = {
x : window.event.clientX + scrollPos.x - document.body.clientLeft,
y : window.event.clientY + scrollPos.y - document.body.clientTop
};
}else{
XY = {x: e.pageX, y: e.pageY};
}
return XY;
},
// 获取元素坐标
getCoords = function(node){
var x = node.offsetLeft;
var y = node.offsetTop;
var parent = node.offsetParent;
while (parent != null){
x += parent.offsetLeft;
y += parent.offsetTop;
parent = parent.offsetParent;
}
return {x: x, y: y};
},
EndEvent = function(e) {
e = e || window.event;
e.stopPropagation && (e.preventDefault(), e.stopPropagation()) || (e.cancelBubble = true, e.returnValue = false);
},
// 事件操作(可保留原有事件)
eventListeners = [],
findEventListener = function(node, event, handler){
var i;
for (i in eventListeners){
if (eventListeners[i].node == node && eventListeners[i].event == event && eventListeners[i].handler == handler){
return i;
}
}
return null;
},
myAddEventListener = function(node, event, handler){
if (findEventListener(node, event, handler) != null){
return;
}
if (!node.addEventListener){
node.attachEvent('on' + event, handler);
}else{
node.addEventListener(event, handler, false);
}
eventListeners.push({node: node, event: event, handler: handler});
},
removeEventListenerIndex = function(index){
var eventListener = eventListeners[index];
delete eventListeners[index];
if (!eventListener.node.removeEventListener){
eventListener.node.detachEvent('on' + eventListener.event,
eventListener.handler);
}else{
eventListener.node.removeEventListener(eventListener.event,
eventListener.handler, false);
}
},
myRemoveEventListener = function(node, event, handler){
var index = findEventListener(node, event, handler);
if (index == null) return;
removeEventListenerIndex(index);
},
cleanupEventListeners = function(){
var i;
for (i = eventListeners.length; i > 0; i--){
if (eventListeners[i] != undefined){
removeEventListenerIndex(i);
}
}
};
//-->
</script>
<script language="javascript" type="text/javascript">
<!--
function mScrollBox(inits) {
var _o = this;
var _i = inits;

// 初始化
_o.init = function() {
_o.objFro = $(inits.object);
if(_o.objFro == null) {
return;
}
_o.mode = _i.mode==undefined ? 'y' : _i.mode; // 滚动模式(x:横向, y:纵向)
_o.maxSpeed = _i.maxSpeed==undefined ? 7 : _i.maxSpeed; // 最大滚动步长

if(_o.mode=='y') {
_o.height = _o.objFro.offsetHeight; // 可见高度
_o.sHeight = _o.objFro.scrollHeight; // 实际高度
_o.smHeight = _o.sHeight-_o.height; // 可滚动高度
if(_o.smHeight<=0) return;
}else{
_o.width = _o.objFro.offsetWidth; // 可见宽度
_o.sWidth = _o.objFro.scrollWidth; // 实际宽度
_o.smWidth = _o.sWidth-_o.width; // 可滚动宽度
if(_o.smWidth<=0) return;
}
_o.preSpace = _o.mode=='y' ? (_o.space/_o.height) : (_o.space/_o.width);
_o.doTimer = null;
_o.pos = getCoords(_o.objFro);
myAddEventListener(_o.objFro, 'mousemove', _o.doScroll);
myAddEventListener(_o.objFro, 'mouseout', _o.stopScroll);
}

// 滚动...
_o.doScroll = function(e) {
e = e || event;
var _pos= getXY(e);
// 计算滚动步长
_o.speed = _o.mode=='y' ? (_pos.y-_o.pos.y)/_o.height : (_pos.x-_o.pos.x)/_o.width;
_o.speed = (_o.speed-0.5) * 2;
_o.speed = Math.round(_o.speed*_o.maxSpeed);

if(_o.doTimer==null) _o.doTimer = setInterval((_o.mode=='y' ? _o.scrollY : _o.scrollX), 10);
}

// 垂直滚动
_o.scrollY = function() {
_o.objFro.scrollTop += _o.speed;
var _top = _o.objFro.scrollTop;
if(_top==0 || _top==_o.smHeight) _o.stopScroll();
}

// 水平滚动
_o.scrollX = function() {
_o.objFro.scrollLeft += _o.speed;
var _left = _o.objFro.scrollLeft;
if(_left==0 || _left==_o.smWidth) _o.stopScroll();
}

// 停止滚动
_o.stopScroll = function() {
clearInterval(_o.doTimer);
_o.doTimer = null;
}

_o.init();
}
/*mScrollBox 测试*/
function testMSB() {
new mScrollBox({
object : 'testMSB2',
mode : 'x'
});
}
myAddEventListener(window, 'load', testMSB);
//-->
</script>
</head>
<body>
<div class="case">
<div class="title"><a href="#" class="r">Top</a>mScrollBox&nbsp;调用方法</div>
<div class="b">mScrollBox({ScrollFor, Mode, maxSpeed});</div>
<ul class="info gray">
<li><span class="key">ScrollFor:</span><span class="type">Object</span>滚动对象&nbsp;&nbsp;(*必须)</li>
<li><span class="key">Mode:</span><span class="type">String</span>滚动模式&nbsp;-&nbsp;x:横向, y:纵向(默认)&nbsp;&nbsp;(*可选)</li>
<li><span class="key">maxSpeed:</span><span class="type">Number</span>最大滚动步长&nbsp;-&nbsp;默认7&nbsp;&nbsp;(*可选)</li>
</ul>
</div>
<div class="case">
<div class="title"><a href="#" class="r">Top</a>mScrollBox&nbsp;演示&nbsp;-&nbsp;横向滚动</div>
<div id="testMSB2" class="itemList2" style="border: solid 1px #EAEAEA; padding: 2em">
悟空你也太调皮了,我跟你说过,叫你不要乱扔东西, 乱扔东西这么做…… (咣当,悟空棍子掉在地上) 你看我还没有说完呢你把棍子又给扔掉了!月光宝盒是宝物,你把他扔掉会污染环境,唉,要是砸到小朋友那怎么办?就算没有砸到小朋友砸到那些花花草草也是不对的呀!
</div>
</div>
<a href="" title="按此向左滚动">按此向左滚动</a>
<br />
<a href="" title="按此向右滚动">按此向右滚动</a>
</body>
</html>