此代码献给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. System.Data.SQLite.EF6

    2015.1.21 到目前为止这个破玩意不支持code first 建数据库 建表 代替方案   SQL Server Compact -------------------------------- ...

  2. C#_uploadify_mvc_version

    jQuery Uploadify在ASP.NET MVC3中的使用 1.Uploadify简介 Uploadify是基于jQuery的一种上传插件,支持多文件.带进度条显示上传,在项目开发中常被使用. ...

  3. Windows 之 删除文件出现“该项目不在请确认该项目的位置”

    原理为通过 DOS 命令自建一个 .bat 批处理文件. 第一步,首先桌面新建TXT文档: 第二步,主要使用DEL 和 RD 命令,打开文档复制下面内容里面: DEL /F /A /Q \\?\%1 ...

  4. 一个把List<String>转化为以","隔开的字符串的方法

    import java.util.ArrayList; import java.util.List; /** * 集合操作 * @author intrl * @date 2010-12-15 * @ ...

  5. 【思路、优化】UVa 11491 - Erasing and Winning

    Juliano is a fan of the TV show Erasing and Winning, where participants are selected in a draw and r ...

  6. 【路径寻找问题】UVa 10603 - Fill

    如家大神书上的例题.第一次接触也是按代码敲得.敲的过程感觉很直观.但自己写估计会写的乱七八糟.以后不能砍得难就不愿意做这种题.否则只能做一些水题了.(PS:48) 紫书 #include<ios ...

  7. poj 1848 树形dp

    思路:表示我很弱,这个想不出dp方程,参考网上代码 #include<iostream> #include<algorithm> #include<cstring> ...

  8. [Yii2]Access to debugger is denied due to IP address restriction. The requesting IP address is

    在更新到正式平台,看到runtime/app.log 有 Access to debugger is denied due to IP address restriction. The request ...

  9. iOS开发那些事--性能优化–内存泄露问题的解决(转）

    内存泄漏问题的解决 内存泄漏(Memory Leaks)是当一个对象或变量在使用完成后没有释放掉,这个对象一直占有着这块内存,直到应用停止.如果这种对象过多内存就会耗尽,其它的应用就无法运行.这个问题 ...

  10. replace替换语句

    t_sql语句:replace替换语句:update 表名 set 列名=REPLACE(列名,'替换的数据','替换后的数据')