1. 首页
  2. 编程与技术

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

发布于 2017-06-16 09:28:26 | 107 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例，程序狗速度看过来！

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。

这篇文章主要介绍了jQuery实现的自定义滚动条,结合完整实例详细分析了jQuery自定义滚动条的实现步骤与相关操作技巧,并给出了jquery.jscroll.js插件的完整代码,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。



最新网友评论  共有(0)条评论 发布评论 返回顶部
推荐阅读
  • 终极炫富——2016 年 iOS 开发者收入调查报告
  • 年度大片：Stack Overflow 2017 开发者调查报告发布！
  • 开发者需要大学学位吗？
  • 程序员多大年纪算高龄，届时该何去何从？
  • 2017 年高薪编程语言排行榜，你的语言上榜没？
  • 各编程语言开发者最常使用的按键，中了没?
  • 伤不起的三十岁，干不动的程序员要何去何从？
  • 2016年中国加班最狠IT公司排行
  • 一句话"面试"漫画：黑了苹果、谷歌、三星
  • 拿代码量算 KPI ……跟程序员们来这套？
  • 程序员遇到 Bug 时的 30 个反应，你是哪一种？
  • 2016年收入最高的5个编程语言 Java和C没在前五?
  • 为什么很少见人傻钱多的程序员炫富？
  • 阿里月薪两万是什么体验？
  • 代码缩进时 程序员更喜欢空格键还是Tab键？
    • 最新资讯
  • Python获取系统所有进程PID及进程名称的方法示例
  • Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
  • Python实现的根据IP地址计算子网掩码位数功能示例
  • 好的Python培训机构应该具备哪些条件
  • 详解Pytorch 使用Pytorch拟合多项式(多项式回归)
  • Python加载带有注释的Json文件实例
  • 对python的文件内注释 help注释方法
  • Python实现判断一行代码是否为注释的方法
  • Oracle数据库表中字段顺序的修改方法
  • ASP.NET MVC 4使用PagedList.Mvc分页的实现代码
  • Oracle实例启动时报错：ORA-32004的解决方法
  • 解读ASP.NET 5 & MVC6系列教程（7）：依赖注入
  • 详解IDEA用maven创建springMVC项目和配置
  • ASP.NET MVC5网站开发之展示层架构（五）
  • SpringBoot创建maven多模块项目实战代码
    • 后端技术
    前端技术
    数据库
    热门框架
    常用IDE
    其他
    Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务