jQuery實(shí)現(xiàn)的自定義滾動(dòng)條實(shí)例詳解
更新時(shí)間：2016年09月20日 12:08:35 作者：朱羽佳
這篇文章主要介紹了jQuery實(shí)現(xiàn)的自定義滾動(dòng)條,結(jié)合完整實(shí)例詳細(xì)分析了jQuery自定義滾動(dòng)條的實(shí)現(xiàn)步驟與相關(guān)操作技巧,并給出了jquery.jscroll.js插件的完整代碼,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)的自定義滾動(dòng)條。分享給大家供大家參考，具體如下：
可以自由的給滾動(dòng)條定義背景，上下按鈕，當(dāng)然不僅僅是顏色，連圖片當(dāng)背景也可以。支持鼠標(biāo)滾輪，點(diǎn)擊滾動(dòng)條滾軸定位，上下按鈕久按加速，兼容 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>
高級(jí)應(yīng)用（自定義滾動(dò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è)置滾動(dòng)條寬度
BgUrl:"url(/images/s_bg2.gif)", //設(shè)置滾動(dòng)條背景圖片地址
Bg:"right 0 repeat-y", //設(shè)置滾動(dòng)條背景圖片position,顏色等
Bar:{
Pos:"bottom", //設(shè)置滾動(dòng)條初始化位置在底部
Bd:{ //設(shè)置滾動(dòng)滾軸邊框顏色：鼠標(biāo)離開(默認(rèn))，經(jīng)過
Out:"#a3c3d5",
Hover:"#b7d5e6"
},
Bg:{ //設(shè)置滾動(dòng)條滾軸背景：鼠標(biāo)離開(默認(rèn))，經(jīng)過，點(diǎn)擊
Out:"-45px 0 repeat-y",
Hover:"-58px 0 repeat-y",
Focus:"-71px 0 repeat-y"
}
},
Btn:{
btn:true, //是否顯示上下按鈕 false為不顯示
uBg:{ //設(shè)置上按鈕背景：鼠標(biāo)離開(默認(rèn))，經(jīng)過，點(diǎn)擊
Out:"0 0",
Hover:"-15px 0",
Focus:"-30px 0"
},
dBg:{ //設(shè)置下按鈕背景：鼠標(biāo)離開(默認(rèn))，經(jīng)過，點(diǎn)擊
Out:"0 -15px",
Hover:"-15px -15px",
Focus:"-30px -15px"
}
},
Fn:function(){} //滾動(dòng)時(shí)候觸發(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;//滾動(dòng)方向
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í)對(duì)象
j.Btn = j.Btn||{};//2級(jí)對(duì)象
j.Bar.Bg = j.Bar.Bg||{};//3級(jí)對(duì)象
j.Bar.Bd = j.Bar.Bd||{};//3級(jí)對(duì)象
j.Btn.uBg = j.Btn.uBg||{};//3級(jí)對(duì)象
j.Btn.dBg = j.Btn.dBg||{};//3級(jí)對(duì)象
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//滾動(dòng)時(shí)候跳動(dòng)幅度
// 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ū)域鼠標(biāo)位置，screenY屏幕可視區(qū)域鼠標(biāo)位置
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擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery對(duì)JSON數(shù)據(jù)進(jìn)行排序輸出的方法
這篇文章主要介紹了jQuery對(duì)JSON數(shù)據(jù)進(jìn)行排序輸出的方法,涉及jQuery中g(shù)etJSON與sort等方法的使用技巧,需要的朋友可以參考下2015-06-06
13 款最熱門的 jQuery 圖像 360 度旋轉(zhuǎn)插件推薦
這篇文章主要介紹了13 款最熱門的 jQuery 圖像 360 度旋轉(zhuǎn)插件，非常炫酷實(shí)用，有需要的小伙伴參考下2014-12-12
BootStrap表單驗(yàn)證中的非Submit類型按鈕點(diǎn)擊時(shí)觸發(fā)驗(yàn)證的坑
這篇文章主要介紹了BootStrap表單驗(yàn)證中的非Submit類型按鈕點(diǎn)擊時(shí)觸發(fā)驗(yàn)證的坑,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
剛開始學(xué)jQuery，于是想試試學(xué)習(xí)效果，所以就做了個(gè)這個(gè)TextBox自動(dòng)完成條，練習(xí)練習(xí)。請(qǐng)牛人們別笑話。2009-07-07
這篇文章主要介紹了jQuery中$.extend()用法,實(shí)例分析了extend()方法的功能、定義及相關(guān)的使用技巧,需要的朋友可以參考下2015-06-06
jQuery插件zTree實(shí)現(xiàn)的基本樹與節(jié)點(diǎn)獲取操作示例
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)的基本樹與節(jié)點(diǎn)獲取操作,結(jié)合實(shí)例形式分析了jQuery樹形插件zTree構(gòu)造基本樹與針對(duì)節(jié)點(diǎn)的獲取操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03
select標(biāo)簽?zāi)M/美化方法采用JS外掛式插件
select標(biāo)簽的外觀問題很惱人，各個(gè)瀏覽器都不一致，單單就IE，一個(gè)版本就一個(gè)長相，還不能用CSS修飾，接下來將本人對(duì)select的美化方法共享出來，感興趣的朋友可以參考下2013-04-04
解決jQuery插件tipswindown與hintbox沖突
先掃下盲：tipswindown是jQuery的彈窗插件，可以使用url或當(dāng)前頁元素顯示在模擬層中；hintbox是jQuery的類似Google Suggestions插件。2010-11-11
基于JQuery實(shí)現(xiàn)相同內(nèi)容合并單元格的代碼
我們就中和下利用JQuery來和他一個(gè)table里面相同內(nèi)容的單元格，這里代碼跟大家分享下，希望對(duì)大家有用2011-01-01
jQuery實(shí)現(xiàn)獲取h1-h6標(biāo)題元素值的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取h1-h6標(biāo)題元素值的方法,涉及$(":header")選擇器操作h1-h6元素及事件響應(yīng)相關(guān)技巧,需要的朋友可以參考下2017-03-03