«

jQuery实现的自定义滚动条实例详解

时间：2024-3-2 08:29     作者：韩俊     分类： Javascript

本文实例讲述了jQuery实现的自定义滚动条。分享给大家供大家参考，具体如下：

可以自由的给滚动条定义背景，上下按钮，当然不仅仅是颜色，连图片当背景也可以。支持鼠标滚轮，点击滚动条滚轴定位，上下按钮久按加速，兼容 ie，firefox，chrome。

调用方法：

$("#a").jscroll();

demo：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8"/>
  <title>demo</title>
  <link rel="stylesheet" type="text/css" href="/css/base.min.css" media="all"/>
  <style type="text/css">
  #a{width:500px;overflow:hidden;position:relative;height:200px;background:#f5f5f5;}
  </style>
</head>
<body>
  <div id="a">
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>底部</p>
  </div>
</body>
</html>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.jscroll.js"></script>
<script type="text/javascript">
$(function(){
  $("#a").jscroll();
});
</script>

高级应用（自定义滚动条背景及上下按钮）：

调用图片：

demo：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8"/>
  <title>demo</title>
  <link rel="stylesheet" type="text/css" href="/css/base.min.css" media="all"/>
  <style type="text/css">
  #a{width:500px;overflow:hidden;position:relative;height:200px;background:#f5f5f5;}
  </style>
</head>
<body>
  <div id="a">
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>测试文字</p>
    <p>底部</p>
  </div>
</body>
</html>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.jscroll.js"></script>
<script type="text/javascript">
$(function(){
  $("#a").jscroll({
    W:"15px",  //设置滚动条宽度
    BgUrl:"url(/images/s_bg2.gif)",  //设置滚动条背景图片地址
    Bg:"right 0 repeat-y",  //设置滚动条背景图片position,颜色等
    Bar:{
      Pos:"bottom",  //设置滚动条初始化位置在底部
      Bd:{  //设置滚动滚轴边框颜色：鼠标离开(默认)，经过
        Out:"#a3c3d5",
        Hover:"#b7d5e6"
      },
      Bg:{  //设置滚动条滚轴背景：鼠标离开(默认)，经过，点击
        Out:"-45px 0 repeat-y",
        Hover:"-58px 0 repeat-y",
        Focus:"-71px 0 repeat-y"
      }
    },
    Btn:{
      btn:true,  //是否显示上下按钮 false为不显示
      uBg:{  //设置上按钮背景：鼠标离开(默认)，经过，点击
        Out:"0 0",
        Hover:"-15px 0",
        Focus:"-30px 0"
      },
      dBg:{  //设置下按钮背景：鼠标离开(默认)，经过，点击
        Out:"0 -15px",
        Hover:"-15px -15px",
        Focus:"-30px -15px"
      }
    },
    Fn:function(){}  //滚动时候触发的方法
  });
});
</script>

jquery.jscroll.js：

/**
 *
 * Copyright (c) 2009 May(qq104010230)
 * http://www.winwill.com
 * http://www.winwill.com/jquery/jscroll.html
 * admin@winwill.com
 */
/*--------------------------------------------------------------------------------------------------*/
$.fn.extend({//添加滚轮事件//by jun
  mousewheel:function(Func){
    return this.each(function(){
      var _self = this;
      _self.D = 0;//滚动方向
      if($.browser.msie||$.browser.safari){
        _self.onmousewheel=function(){_self.D = event.wheelDelta;event.returnValue = false;Func && Func.call(_self);};
      }else{
        _self.addEventListener("DOMMouseScroll",function(e){
          _self.D = e.detail>0?-1:1;
          e.preventDefault();
          Func && Func.call(_self);
        },false);
      }
    });
  }
});
$.fn.extend({
  jscroll:function(j){
    return this.each(function(){
      j = j || {}
      j.Bar = j.Bar||{};//2级对象
      j.Btn = j.Btn||{};//2级对象
      j.Bar.Bg = j.Bar.Bg||{};//3级对象
      j.Bar.Bd = j.Bar.Bd||{};//3级对象
      j.Btn.uBg = j.Btn.uBg||{};//3级对象
      j.Btn.dBg = j.Btn.dBg||{};//3级对象
      var jun = { W:"15px"
            ,BgUrl:""
            ,Bg:"#efefef"
            ,Bar:{ Pos:"up"
                ,Bd:{Out:"#b5b5b5",Hover:"#ccc"}
                ,Bg:{Out:"#fff",Hover:"#fff",Focus:"orange"}}
            ,Btn:{ btn:true
                ,uBg:{Out:"#ccc",Hover:"#fff",Focus:"orange"}
                ,dBg:{Out:"#ccc",Hover:"#fff",Focus:"orange"}}
            ,Fn:function(){}}
      j.W = j.W||jun.W;
      j.BgUrl = j.BgUrl||jun.BgUrl;
      j.Bg = j.Bg||jun.Bg;
        j.Bar.Pos = j.Bar.Pos||jun.Bar.Pos;
          j.Bar.Bd.Out = j.Bar.Bd.Out||jun.Bar.Bd.Out;
          j.Bar.Bd.Hover = j.Bar.Bd.Hover||jun.Bar.Bd.Hover;
          j.Bar.Bg.Out = j.Bar.Bg.Out||jun.Bar.Bg.Out;
          j.Bar.Bg.Hover = j.Bar.Bg.Hover||jun.Bar.Bg.Hover;
          j.Bar.Bg.Focus = j.Bar.Bg.Focus||jun.Bar.Bg.Focus;
        j.Btn.btn = j.Btn.btn!=undefined?j.Btn.btn:jun.Btn.btn;
          j.Btn.uBg.Out = j.Btn.uBg.Out||jun.Btn.uBg.Out;
          j.Btn.uBg.Hover = j.Btn.uBg.Hover||jun.Btn.uBg.Hover;
          j.Btn.uBg.Focus = j.Btn.uBg.Focus||jun.Btn.uBg.Focus;
          j.Btn.dBg.Out = j.Btn.dBg.Out||jun.Btn.dBg.Out;
          j.Btn.dBg.Hover = j.Btn.dBg.Hover||jun.Btn.dBg.Hover;
          j.Btn.dBg.Focus = j.Btn.dBg.Focus||jun.Btn.dBg.Focus;
      j.Fn = j.Fn||jun.Fn;
      var _self = this;
      var Stime,Sp=0,Isup=0;
      $(_self).css({overflow:"hidden",position:"relative",padding:"0px"});
      var dw = $(_self).width(), dh = $(_self).height()-1;
      var sw = j.W ? parseInt(j.W) : 21;
      var sl = dw - sw
      var bw = j.Btn.btn==true ? sw : 0;
      if($(_self).children(".jscroll-c").height()==null){//存在性检测
    $(_self).wrapInner("<div class='jscroll-c' style='top:0px;z-index:9999;zoom:1;position:relative'></div>");
      $(_self).children(".jscroll-c").prepend("<div style='height:0px;overflow:hidden'></div>");
      $(_self).append("<div class='jscroll-e' unselectable='on' style=' height:100%;top:0px;right:0;-moz-user-select:none;position:absolute;overflow:hidden;z-index:10000;'><div class='jscroll-u' style='position:absolute;top:0px;width:100%;left:0;background:blue;overflow:hidden'></div><div class='jscroll-h' unselectable='on' style='background:green;position:absolute;left:0;-moz-user-select:none;border:1px solid'></div><div class='jscroll-d' style='position:absolute;bottom:0px;width:100%;left:0;background:blue;overflow:hidden'></div></div>");
      }
      var jscrollc = $(_self).children(".jscroll-c");
      var jscrolle = $(_self).children(".jscroll-e");
      var jscrollh = jscrolle.children(".jscroll-h");
      var jscrollu = jscrolle.children(".jscroll-u");
      var jscrolld = jscrolle.children(".jscroll-d");
      if($.browser.msie){document.execCommand("BackgroundImageCache", false, true);}
      jscrollc.css({"padding-right":sw});
      jscrolle.css({width:sw,background:j.Bg,"background-image":j.BgUrl});
      jscrollh.css({top:bw,background:j.Bar.Bg.Out,"background-image":j.BgUrl,"border-color":j.Bar.Bd.Out,width:sw-2});
      jscrollu.css({height:bw,background:j.Btn.uBg.Out,"background-image":j.BgUrl});
      jscrolld.css({height:bw,background:j.Btn.dBg.Out,"background-image":j.BgUrl});
      jscrollh.hover(function(){if(Isup==0)$(this).css({background:j.Bar.Bg.Hover,"background-image":j.BgUrl,"border-color":j.Bar.Bd.Hover})},function(){if(Isup==0)$(this).css({background:j.Bar.Bg.Out,"background-image":j.BgUrl,"border-color":j.Bar.Bd.Out})})
      jscrollu.hover(function(){if(Isup==0)$(this).css({background:j.Btn.uBg.Hover,"background-image":j.BgUrl})},function(){if(Isup==0)$(this).css({background:j.Btn.uBg.Out,"background-image":j.BgUrl})})
      jscrolld.hover(function(){if(Isup==0)$(this).css({background:j.Btn.dBg.Hover,"background-image":j.BgUrl})},function(){if(Isup==0)$(this).css({background:j.Btn.dBg.Out,"background-image":j.BgUrl})})
      var sch = jscrollc.height();
      //var sh = Math.pow(dh,2) / sch ;//Math.pow(x,y)x的y次方
      var sh = (dh-2*bw)*dh / sch
      if(sh<10){sh=10}
      var wh = sh/6//滚动时候跳动幅度
    //  sh = parseInt(sh);
      var curT = 0,allowS=false;
      jscrollh.height(sh);
      if(sch<=dh){jscrollc.css({padding:0});jscrolle.css({display:"none"})}else{allowS=true;}
      if(j.Bar.Pos!="up"){
      curT=dh-sh-bw;
      setT();
      }
      jscrollh.bind("mousedown",function(e){
        j['Fn'] && j['Fn'].call(_self);
        Isup=1;
        jscrollh.css({background:j.Bar.Bg.Focus,"background-image":j.BgUrl})
        var pageY = e.pageY ,t = parseInt($(this).css("top"));
        $(document).mousemove(function(e2){
           curT =t+ e2.pageY - pageY;//pageY浏览器可视区域鼠标位置，screenY屏幕可视区域鼠标位置
            setT();
        });
        $(document).mouseup(function(){
          Isup=0;
          jscrollh.css({background:j.Bar.Bg.Out,"background-image":j.BgUrl,"border-color":j.Bar.Bd.Out})
          $(document).unbind();
        });
        return false;
      });
      jscrollu.bind("mousedown",function(e){
      j['Fn'] && j['Fn'].call(_self);
        Isup=1;
        jscrollu.css({background:j.Btn.uBg.Focus,"background-image":j.BgUrl})
        _self.timeSetT("u");
        $(document).mouseup(function(){
          Isup=0;
          jscrollu.css({background:j.Btn.uBg.Out,"background-image":j.BgUrl})
          $(document).unbind();
          clearTimeout(Stime);
          Sp=0;
        });
        return false;
      });
      jscrolld.bind("mousedown",function(e){
      j['Fn'] && j['Fn'].call(_self);
        Isup=1;
        jscrolld.css({background:j.Btn.dBg.Focus,"background-image":j.BgUrl})
        _self.timeSetT("d");
        $(document).mouseup(function(){
          Isup=0;
          jscrolld.css({background:j.Btn.dBg.Out,"background-image":j.BgUrl})
          $(document).unbind();
          clearTimeout(Stime);
          Sp=0;
        });
        return false;
      });
      _self.timeSetT = function(d){
        var self=this;
        if(d=="u"){curT-=wh;}else{curT+=wh;}
        setT();
        Sp+=2;
        var t =500 - Sp*50;
        if(t<=0){t=0};
        Stime = setTimeout(function(){self.timeSetT(d);},t);
      }
      jscrolle.bind("mousedown",function(e){
          j['Fn'] && j['Fn'].call(_self);
              curT = curT + e.pageY - jscrollh.offset().top - sh/2;
              asetT();
              return false;
      });
      function asetT(){
            if(curT<bw){curT=bw;}
            if(curT>dh-sh-bw){curT=dh-sh-bw;}
            jscrollh.stop().animate({top:curT},100);
            var scT = -((curT-bw)*sch/(dh-2*bw));
            jscrollc.stop().animate({top:scT},1000);
      };
      function setT(){
            if(curT<bw){curT=bw;}
            if(curT>dh-sh-bw){curT=dh-sh-bw;}
            jscrollh.css({top:curT});
            var scT = -((curT-bw)*sch/(dh-2*bw));
            jscrollc.css({top:scT});
      };
      $(_self).mousewheel(function(){
          if(allowS!=true) return;
          j['Fn'] && j['Fn'].call(_self);
            if(this.D>0){curT-=wh;}else{curT+=wh;};
            setT();
      })
    });
  }
});

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

标签: javascript

热门推荐

1 vue项目怎么使用electron进行打包
2 javascript的函数作用域
3 vue怎么求元素总和
4 Vue2异步更新及nextTick原理是什么
5 Jquery $when done then的用法详解
6 写自已的js类库需要的核心代码
7 express的中间件cookieParser详解
8 学习JavaScript设计模式之单例模式
9 老生常谈JQuery data方法的使用
10 Javascript 读书笔记索引贴

日历

标签

hbase maven eclipse sybase PostgreSQL spring emcache oracle mongodb redis nginx golang java vue android ios mysql linux 微信小程序 css html php教程 javascript python php

搜索

最新文章

热门文章