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

2024-03-24 13:39:36

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

JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合

因为浏览器的兼容问题,如果使用javascript获取这些数值是一个相当痛苦的过程.好在JQuery提供了简单优雅,并且兼容的解决方法. 获取浏览器和页面文档的宽度和高度复制代码代码如下: //获取浏览器显示区域的高度 $(window).height(); //获取浏览器显示区域的宽度 $(window).width(); //获取页面的文档高度 $(document.body).height(); //获取页面的文档宽度 $(document.body).width(); 获取滚动条的位
jQuery实现的多张图无缝滚动效果【测试可用】

本文实例讲述了jQuery实现的多张图无缝滚动效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slider</title> <style> *{ padding: 0; margin: 0; } li{ list-style-type: none; }
jquery实现的回旋滚动效果完整实例【附demo源码下载】

本文实例讲述了jquery实现的回旋滚动效果.分享给大家供大家参考,具体如下: 这里分享一款回旋滚动效果,先上效果图: 具体代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>jquery-roundabout</title> <style type="text/css&qu
jquery无缝向上滚动实现代码

JS部份复制代码代码如下: $(function(){ var $this = $(".renav"); var scrollTimer; $this.hover(function(){ clearInterval(scrollTimer); },function(){ scrollTimer = setInterval(function(){ scrollNews( $this ); }, 2000 ); }).trigger("mouseout"); });
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

兼容各浏览器的文本行高复制代码代码如下: (function($){ $.fn.extend({ RollTitle: function(opt,callback){ if(!opt) var opt={}; var _this = this; _this.timer = null; _this.lineH = _this.find("li:first").height(); _this.line=opt.line?parseInt(opt.line,15):parseInt(_t
jQuery创建平滑的页面滚动(顶部或底部)

在这篇文章中,我将通过本教程向您展示了如何创建一个平滑的滚动效果,使用jQuery.让您可以滚动到你的网页的顶部或底部它是如何工作的首先,加载jquery库在</ head>标签结束前: 复制代码代码如下: <script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery1.3.2.js"></script>jQuery滚动到底部: 链接
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】

本文实例讲述了jQuery实现导航滚动到指定内容效果.分享给大家供大家参考,具体如下: 做页面制作也有两年了,其中也做过许多页面效果,有简单的,也有复杂的,今天就来分享一个导航滚动到内容的特效. 平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有"小尾巴",今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有"小尾巴". html: <!DOCTYPE
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码复制代码代码如下: document.body.offsetWidth document.body.offsetHeight 在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: 代码如下复制代码复制代码代码如下: document.documentElement.clientWidth document.documentElement.cli
六款帮助你实现惊艳视差滚动效果的jQuery插件

在网页设计中,视差滚动(Parallax Scrolling)是当下流行的网页设计技术,通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果.下面是一些运用视差滚动效果的优秀网页案例: 视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是"改变".在网页设计中,视差滚动(Parallax Scrolling)是当下流行的网页设计技术,通过让多层背景以不同的速度或者不同的方向
JQuery插件iScroll实现下拉刷新，滚动翻页特效

JQuery插件:iScroll 页面布局: <div id="wrapper"> <div id="scroller"> <div id="pullDown"> <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span> <
jQuery模拟Marquee实现无缝滚动效果完整实例

本文实例讲述了jQuery模拟Marquee实现无缝滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>模拟Marquee无缝滚动</title> <style type="text/css"> /* CSS Document reset */ html, body, di
jQuery视差滚动效果网页实现方法经验总结

本文总结分析了jQuery视差滚动效果网页实现方法.分享给大家供大家参考,具体如下: 首先说两个核心函数,当然是基于jQuery的: 1.$(document).scrollTop() ; 该函数主要是返回页面当前顶部距离页面顶部的像素值,是一个非负整数. 2.$(window).scroll(); 该事件是监控页面是否滚动,一旦滚动则触发其回调函数. 由此两个函数,我们得到下面的代码: $(window).scroll(function() { var top = $(document).sc

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

相关推荐

随机推荐