此代码献给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. RabbitMQ+PHP 消息队列环境配置

    参考文档:http://www.cnblogs.com/phpinfo/p/4104551...http://blog.csdn.net/historyasamirror/ar... 依赖包安装 yu ...

  2. 炼数成金hadoop视频干货06-10

    视频地址:http://pan.baidu.com/s/1dDEgKwD 第六课统讲了hadoop几个子项目和HBase,第七课还是讲的HBase 第八课讲了PIG 第九课讲了Hive和Zookeep ...

  3. 阅读の反思のGraphicsPath.AddArc

        最近在使用GDI+绘图,想要绘制一个圆角矩形,于是在网上搜索,发现如下方法: 于是自己扫视一眼,只看到"先画四个园弧,再调用CloseFigure"   由于没仔细看注意, ...

  4. Android之ListView常用技巧

    ListView是一个非常常用的列表控件,虽然在5.x时代ListView的风头正在逐渐的被RecyclerView抢去,但是ListView的使用范围依然十分广泛. 接下来的ListView的常用技 ...

  5. Objective-C ,ios,iphone开发基础:JSON解析（使用苹果官方提供的JSON库：NSJSONSerialization）

    json和xml的普及个人觉得是为了简化阅读难度,以及减轻网络负荷,json和xml 数据格式在格式化以后都是一种树状结构,可以树藤摸瓜的得到你想要的任何果子. 而不格式化的时候json和xml 又是 ...

  6. Halcon C++混合编程学习之Qt 实现检测焊接点

    1 # include "HalconCpp.h" # include "HDevThread.h" # include <X11/Xlib.h> ...

  7. Java动态加载jar及class文件

    经常碰到需要动态加载jar及class文件的场景.Java类由于需要加载和编译字节码,动态加载class文件较为麻烦,但JDK仍提供了一整套方法来动态加载jar文件和class文件. 一.动态加载ja ...

  8. poj 2823 单调队列

    思路:裸的单调队列. #include<iostream> #include<cstring> #include<cstdio> #include<algor ...

  9. hdu 4605 线段树与二叉树遍历

    思路: 首先将所有的查询有一个vector保存起来.我们从1号点开始dfs这颗二叉树,用线段树记录到当前节点时,走左节点的有多少比要查询该节点的X值小的,有多少大的, 同样要记录走右节点的有多少比X小 ...

  10. Jquery 全选、反选问题解析

    最近工作中,需要使用Jquery实现复选框的全选和反选,本人虽然不是专职撸前端的,但这个小问题感觉也没什么难度,下面直接上代码: <div id="list"> < ...