此代码献给wendy
由于工作太忙，下次再整理成插件调用，先记录下来，欢迎同学们提意见。
<!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>jQuery 模拟横向滚动条</title> <script type="text/javascript" src="http://mat1.gtimg.com/www/js/tcomment/jquery-1.6.2.min.js"></script> <style> /* 主体 */ #lk_scrollBox {width:600px; height:320px; border:1px solid black; position:relative; overflow:hidden; } /* 滚动条 */ #lk_scrollbar {width:560px; height:20px; background:#CCC; position: absolute; left:20px; bottom:0;} #lk_handle {width:20px; height:20px; background:red; position:absolute; cursor:pointer;left:0px} /* 内容区 */ #lk_scrollInner { width:600px; height:320px; overflow:hidden; padding-bottom:20px;overflow-y:hidden;overflow-x:scroll} #lk_scrollInner #lk_content{ width:1800px;} #lk_scrollInner #lk_content div{ } /* 开始、结束按钮 */ #lk_begin{ position:absolute; height:20px; width:20px; background:#666; left:-20px;} #lk_end{ position:absolute; height:20px; width:20px; background:#666; right:-20px;} table{ width:100%; border:2px solid #CCC } table td{ border:1px solid #ccc; padding:10px} </style> </head> <body> <div id='lk_scrollBox'> <div id="lk_scrollInner"> <div id="lk_content"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> </tr> <tr> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> <td>aaa</td> </tr> </table> </div> </div> <div id="lk_scrollbar"> <div id="lk_begin"></div> <div id="lk_handle"></div> <div id="lk_end"></div> </div> </div> <script type="text/javascript"> //20131114 link by jQuery(function(){ oParent=$('#lk_scrollbar'); oDiv1 = $('#lk_handle'); oDiv2 = $('#lk_scrollBox'); oDiv3 = $('#lk_scrollInner'); $begin = $('#lk_begin'); $end = $('#lk_end'); oDiv1.width(30); setTimeout(function(){ reScrollBox() },1000) // reScrollBox=function (){ maxW = oDiv3[0].scrollWidth; minW =oDiv2.width(); scale = minW/maxW; oDiv1.width(oParent.width()*scale+30); } //拖动事件方法 function moveDownSlide(l){ if(l<0){ l=0; }else if(l > oParent.width()-oDiv1.width()){ l=oParent.width()-oDiv1.width(); } oDiv1.css('left',l); var scale=l/(oParent.width()-oDiv1.width()); oDiv3.scrollLeft((oDiv3[0].scrollWidth-oDiv2.width())*scale); } //鼠标滚轮事件 oDiv3.bind('scroll',function(){ var scale=(oDiv3[0].scrollWidth-oDiv2.width())/(oParent.width()-oDiv1.width()); var t = $(this).scrollLeft()/scale; oDiv1.css('left',t) }); //鼠标拖动事件 oDiv1[0].onmousedown=function (ev){ ev=ev||window.event; var disX=ev.clientX - oDiv1.position().left; document.onmousemove=function (ev){ ev=ev||window.event; var l=ev.clientX-disX; moveDownSlide(l); }; document.onmouseup=function (){ document.onmousemove=null; document.onmouseup=null; }; $(document).bind('selectstart',function(ev){ // 防止页面内容被选中 IE return false; }); }; //键盘上下事件 $(window).keydown(function(ev){ var sLeft = oDiv3.scrollLeft(); var maxW = oDiv3[0].scrollWidth - oDiv3.width(); switch(ev.keyCode) { case 37: funLeft(sLeft - 50 > 0 ? sLeft - 50 : 0); break; case 39: funLeft(sLeft + 50 < maxW ? sLeft + 50 : maxW); break; } function funLeft(sLeft){ oDiv3.scrollLeft(sLeft) var t = oDiv3.scrollLeft()*scale; var maxT = oParent.width() - oDiv1.width(); oDiv1.css('left',(t < maxT ? t : maxT) ); } }) $begin.click(function(){ moveDownSlide(0); }) $end.click(function(){ moveDownSlide(1000);//1000为大于宽度的值 }) }); </script> </body> </html>