本文實例講述了jQuery實現(xiàn)的自定義滾動條。分享給大家供大家參考，具體如下：
可以自由的給滾動條定義背景，上下按鈕，當然不僅僅是顏色，連圖片當背景也可以。支持鼠標滾輪，點擊滾動條滾軸定位，上下按鈕久按加速，兼容 ie，firefox，chrome。
調(diào)用方法：
$("#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>高級應(yīng)用（自定義滾動條背景及上下按鈕）：
調(diào)用圖片：
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", //設(shè)置滾動條寬度 BgUrl:"url(/images/s_bg2.gif)", //設(shè)置滾動條背景圖片地址 Bg:"right 0 repeat-y", //設(shè)置滾動條背景圖片position,顏色等 Bar:{ Pos:"bottom", //設(shè)置滾動條初始化位置在底部 Bd:{ //設(shè)置滾動滾軸邊框顏色：鼠標離開(默認)，經(jīng)過 Out:"#a3c3d5", Hover:"#b7d5e6" }, Bg:{ //設(shè)置滾動條滾軸背景：鼠標離開(默認)，經(jīng)過，點擊 Out:"-45px 0 repeat-y", Hover:"-58px 0 repeat-y", Focus:"-71px 0 repeat-y" } }, Btn:{ btn:true, //是否顯示上下按鈕 false為不顯示 uBg:{ //設(shè)置上按鈕背景：鼠標離開(默認)，經(jīng)過，點擊 Out:"0 0", Hover:"-15px 0", Focus:"-30px 0" }, dBg:{ //設(shè)置下按鈕背景：鼠標離開(默認)，經(jīng)過，點擊 Out:"0 -15px", Hover:"-15px -15px", Focus:"-30px -15px" } }, Fn:function(){} //滾動時候觸發(fā)的方法 });});</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瀏覽器可視區(qū)域鼠標位置，screenY屏幕可視區(qū)域鼠標位置 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(); }) }); }});更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery窗口操作技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
新聞熱點
疑難解答
