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

jquery横向滚动条的更多相关文章

  1. IE6下出现横向滚动条问题的解决方案

    当我们在css样式设置为html {overflow-y:auto;}时,在ie7以上版本应用时不会有问题,可是在ie6下就会发现垂直滚动条出现会引起横向滚动条出现.究其原因是在ie6下,当内容过多出 ...

  2. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

  3. android 横向滚动条

    /*** * 横向滚动条,修改版,从左向右滚动,支持html代码和html里面的网络图片 */public class MarqueeView extends LinearLayout { priva ...

  4. jQuery检测滚动条(scroll)是否到达底部

    一.jQuery检测浏览器window滚动条到达底部 jQuery获取位置和尺寸相关函数: $(document).height()    获取整个页面的高度 $(window).height()   ...

  5. WPF，解决Listbox,按住ListboxItem向下拖出Listbox,横向滚动条跑到最后。

    类似这种样式的控件,.,在横向滚动条隐藏的情况下有这样的问题.(横向滚动条显示的时候也会,,目前不知道怎么解决.) 因为这个控件偏移是利用ListBox的ItemsPanelTemplate模版里的S ...

  6. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  7. 逆天的IE7中，诡异的横向滚动条

    今天老邹我又要吐槽IE7了,这个奇葩浏览器总是不让省心.这回遇到的问题,灰常难发现是怎么回事,不过还是让我发现原因,哈哈,只要原因去干掉这个问题比躲避问题用别的办法绕开要爽的多啊. 首先我还是介绍下, ...

  8. DataGrid横向滚动条无法拖动的问题

    项目中经常遇到一些问题,这些问题可能很简单,但是之前从未遇到,可能经过了一番谷歌,也可能是查阅了MSDN,或是借鉴了大牛博客,逐渐有了些眉目,为了将这些东西落地,也为了将来之不易的东西记录下来,以备今 ...

  9. 发掘ListBox的潜力（一）：自动调整横向滚动条宽度

    <自绘ListBox的两种效果>一文帖出之后,从反馈信息来看,大家对这种小技巧还是很认同.接下来我将继续围绕ListBox写一系列的文章,进一步发掘ListBox的潜力,其中包括:自动调整 ...

随机推荐

  1. start.s中的.balignl 16,0xdeadbeef

    转载:http://blog.csdn.net/l_thread/article/details/6020036 开始看start.s中的代码,又一句.balignl 16,0xdeadbeef,不知 ...

  2. java_小技巧

    看很多人说,在Eclipse里面,输入Syso然后按 ALT+/不起作用. 正确的用法如下,先输入一行 System.out.println(); 然后连按5次以上shift键,其实就是粘滞的功能.接 ...

  3. BootStrap2学习日记3--响应式布局实用类

    BootStrap2中常用的响应式布局类如: visible-phone     仅在 手机平台显示 visible-tablet      仅在 平板电脑显示 visible-desktop   仅 ...

  4. Storm中并发程度的理解

    Storm中涉及到了很多组件,例如nimbus,supervisor等等,在参考了这两篇文章之后,对这个有了更好的理解. Understanding the parallelism of a Stor ...

  5. TextFiled 中输入金额

    要求: 输入的金额不能超过六位, 小数点后面只能输入两位小数 如果 textFIled  中第一位输入的是0 ,后面必须输入小数点,否则禁止输入 用到 textfiled代理方法 #pragma ma ...

  6. SQL Server blocking session

    select * from sys.sysprocesses where blocked>0; 96被95block住了. dbcc INPUTBUFFER(95) dbcc INPUTBUFF ...

  7. [改善Java代码]不要让类型默默转换

    建议23:不要让类型默默转换 public class Client { // 光速是30万公里/秒,常量 public static final int LIGHT_SPEED = 30 * 100 ...

  8. 【模拟，时针分针秒针两两夹角】【没有跳坑好兴奋】hdu - 5387 （多校#8 1008）

    算是最好写的一道题了吧,最近模拟没手感,一次过也是很鸡冻o(*￣▽￣*)o 注意事项都在代码里,没有跳坑也不清楚坑点在哪~ #include<cstdio> #include<cst ...

  9. poj 2728 最优比率生成树

    思路:设sum(cost[i])/sum(dis[i])=r;那么要使r最小,也就是minsum(cost[i]-r*dis[i]);那么就以cost[i]-r*dis[i]为边权重新建边.当求和使得 ...

  10. Windows 7 IE11 F12 不能正常使用

    打开任意网站,按下F12,或者右键鼠标,按L键.出现上面的图的情况!解决办法如下:需要安装下面的补丁(KB3008923) 32位系统:http://www.microsoft.com/en-us/d ...