此代码献给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. JAMA:Java矩阵包

    原文链接:JAMA:Java矩阵包 API文档链接:线性代数Java包 JAMA jama是一个非常好用的java的线性代数软件包.适用于日常编程可能碰到的各种矩阵运算问题,提供了一个优雅的简便的解决 ...

  2. 高级I/O之readn和writen函数

    管道.FIFO以及某些设备,特别是终端.网络和STREAMS设备有下列两种性质: (1)一次read操作所返回的数据可能少于所要求的数据,即使还没有达到文件尾端也可能是这样.这不是一个错误,应当继续读 ...

  3. 基于ActiveMQ的统一日志服务

    概述 以ActiveMQ + Log4j + Spring的技术组合,实现基于消息队列的统一日志服务. 参考:Spring+Log4j+ActiveMQ实现远程记录日志——实战+分析 与参考文章的比较 ...

  4. 自定义 Yasnippet 模板

    yasnippet可以把我们常用的代码段或文本储存起来,到使用的时候只需键入几个字母就会自动带出. 比如我们在写python代码时,常常会在文件的第一行写下: #!/usr/bin/env pytho ...

  5. iOS之duplicate symbols for architecture x86_64错误

    在我们写代码过程中可能会经常遇到这样一个错误: <span style="font-size:32px;color:#ff0000;">ld: 4 duplicate  ...

  6. linux注销开关机

    注销:exit 重启:reboot shutdown-r 表示延时分钟数   关机:halt shut -h  

  7. php.ini详解

    [PHP] ; PHP还是一个不断发展的工具,其功能还在不断地删减 ; 而php.ini的设置更改可以反映出相当的变化, ; 在使用新的PHP版本前,研究一下php.ini会有好处的 ;;;;;;;; ...

  8. 核心概念 —— 服务容器

    1.简介 Laravel 服务容器是一个用于管理类依赖和执行依赖注入的强大工具.依赖注入听上去很花哨,其实质是通过构造函数或者某些情况下通过 set 方法将类依赖注入到类中. 让我们看一个简单的例子: ...

  9. Lombok(1.14.8) - @Cleanup

    @Cleanup @Cleanup,关闭流.如果最后清理资源的方法不是 close(),可以指定,例如 @Cleanup("clean"). package com.huey.lo ...

  10. django 学习-6 定义模型--数据库的使用

    1.service mysqld start  首先数据库是可用的 2.rpm -qa |grep MySQL-python  这个包是存在的 3.vim settings 修改databases 加 ...