jQuery 模拟横向滚动条
来源：互联网 发布：淘宝的特色服务有哪些 编辑：程序博客网 时间：2024/06/05 17:50
<!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>
