此代码献给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. VBA Excel 引用 API，以实现“透明”

    1. 引用 API 函数 ' API函数Public Declare Function FindWindow Lib "user32" Alias "FindWindow ...

  2. eclipse 总是提示文件下载

    在首选项->phpeclipse web development ->brower preview default 勾选掉

  3. php中如何使用phpredis

    安装redis服务:下载地址:http://redis.io/download,下载最新文档版本.本教程使用的最新文档版本为 2.8.17,下载并安装: $ wget http://download. ...

  4. 小白日记39：kali渗透测试之Web渗透-SQL手工注入（一）-检测方法

    SQL手工注入(一) SQL注入:通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.[SQL注入原理] ##服务端程序将用户输入参数作为查询 ...

  5. MySQL（19）：SQL语句（MySQL）大全

    SQL语句大全一.创建和删除数据库 1.创建用户 //创建用户且置密码,在MySQL中行,但在Oracle中行  ----必须在超级管理员身份下操作 create user hncu identifi ...

  6. Android（java）学习笔记75：匿名内部类的方式实现多线程程序

    二话不说,首先利用代码体现出来,给大家直观的感觉: package cn.itcast_11; /* 4 * 匿名内部类的格式: 5 * new 类名或者接口名() { 6 * 重写方法; 7 * } ...

  7. VS 无法启动程序

    今天遇到这个问题网上找了很多资料,有很多人都遇到了这个问题,也有很多不同的答案,于是我们个答案都试了一遍都没有解决我这个问题的错误,于是就把控制面板中的打开功能和windows功能里面的Interne ...

  8. IIS错误500.21

    操作系统:win7,有.net2.0,.net4.0 网站4.5, 错误原因:IIS未注册4.0框架. 解决办法: %windir%\Microsoft.NET\Framework\v4.0.3031 ...

  9. 如何删除C/C++源代码中的注释

    具体代码: #include <stdlib.h>  #include <stdio.h>  //删除注释  void commentFilter(FILE* sourceFi ...

  10. AutoHotKey 脚本集中营（一）

    前言:实战是最好的学习.本集中营共分 x+mc2 期(x 为已发行的期数,m 为我的空闲时间,c 为我的更新动力),旨在通过对脚本代码的阅读而提高 AHK 语言的熟练程度.脚本的难度与期数成正比,有兴 ...