jquery横向滚动条

昵称10504424 2013-11-18

展开全文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery 模拟横向滚动条</title>
<script type="text/javascript" src="http://mat1./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>