jquery横向滚动条

 

此代码献给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>

 

posted @ 2013-11-14 16:15  cssfirefly  阅读(2462)  评论(0)  编辑  收藏  举报
foot