本文主要介绍了jQuery实现的自定义滚动条,用完整的例子详细分析了jQuery自定义滚动条的实现步骤和相关操作技巧,并给出了jquery.jscroll.js插件的完整代码,有需要的朋友可以参考。
本文展示了由jQuery实现的自定义滚动条。分享给你,供你参考,如下:
你可以自由定义背景,上下按钮,当然不仅仅是颜色,还有图片作为背景。支持鼠标滚轮,点击滚动条定位,长按上下键加速,兼容ie、firefox、chrome。
调用方法:
$('#a ')。jscroll();
演示:
!文档类型HTML
html lang='en-US '
头
meta charset='UTF-8'/
title演示/标题
link rel=' style sheet ' type=' text/CSS ' href='/CSS/base . min . CSS ' media=' all '/
style type='text/css '
# a { width:500 px;溢出:隐藏;位置:相对;高度:200px背景:# f5f5f5}
/风格
/头
身体
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
脚本类型='文本/javascript '
$(function(){
$('#a ')。jscroll();
});
/脚本
高级应用程序(自定义滚动条背景和上下按钮):
通话图片:
演示:
!文档类型HTML
html lang='en-US '
头
meta charset='UTF-8'/
title演示/标题
link rel=' style sheet ' type=' text/CSS ' href='/CSS/base . min . CSS ' media=' all '/
style type='text/css '
# a { width:500 px;溢出:隐藏;位置:相对;高度:200px背景:# f5f5f5}
/风格
/头
身体
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
脚本类型='文本/javascript '
$(function(){
$('#a ')。jscroll({
W:'15px ',//设置滚动条宽度
Url:' URL (/images/s _ bg2.gif)',//设置滚动条背景图片的地址
Bg:'right 0 repeat-y ',//设置位置,颜色等。滚动条背景图片的。
酒吧:{
Pos:'bottom ',//设置滚动条在底部的初始化位置
Bd:{ //设置滚轮边框颜色:鼠标左键(默认),后
Out:'#a3c3d5 ',
悬停:' #b7d5e6 '
},
Bg:{ //设置滚动条背景:鼠标离开(默认)、经过、点击。
out:“-45px 0重复-y”,
悬停:“-58px 0重复-y”,
焦点:“-71px 0重复-y”
}
},
Btn:{
Btn:true,//是否显示上下按钮。false表示不显示。
UBg:{ //设置上方按钮的背景:鼠标离开(默认)、经过、点击。
传出:“0 0”,
悬停:“-15px 0”,
焦点:“-30px 0”
},
DBg:{ //设置向下按钮的背景:鼠标离开(默认)、经过、点击。
输出:“0 -15px”,
悬停:'-15px -15px ',
焦点:'-30px -15px '
}
},
Fn:function(){} //滚动时触发的方法
});
});
/脚本
jquery.jscroll.js:
/**
*
*版权所有(c) 2009年5月(qq104010230)
* http://www.winwill.com
* http://www.winwill.com/jquery/jscroll.html
* admin@winwill.com
*/
/* - */
$.fn.extend({//添加滚轮事件//由君
鼠标滚轮:功能(函数){
return this.each(function(){
var _ self=this
_self .d=0;//滚动方向
如果($。浏览器。msie | | $。浏览器。safari){
_ self。onmousewheel=function(){ _ self .d=event . wheel delta event . return value=false func func。调用(_ self);};
}否则{
_ self。addevent侦听器(' DOM鼠标滚动',函数(e){
_self .D=e.detail0?-1:1;
e。防止默认();
func功能。调用(_ self);
},假);
}
});
}
});
$.fn.extend({
jscroll:函数(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。BTN。ubg | | { };//3级对象
j.BTN。BTN。dbg | | { };//3级对象
var jun={ W:'15px '
,BgUrl:" "
,Bg:'#efefef '
,条形:{ Pos:'向上'
,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=日本Bg | |六月Bg
j.bar。Pos=j . bar。位置| |六月酒吧。Pos
j.bar。BD。out=j . bar。BD。out | | jun . bar。BD。出;
j.bar。BD。悬停=j . bar。BD。悬停| |君.吧。BD。悬停;
j.bar。BG。out=j . bar。BG。out | | jun . bar。BG。出;
j.bar。BG。悬停=j . bar。BG。悬停| |君.吧。BG。悬停;
j.巴录书Bg。焦点=j . Bar。Bg.Focus | |君吧。背景聚焦君巴录书Bg。焦点
j.Btn.btn=j.Btn.btn!=未定义?日本Btn.btn:君BTN。BTN;
j.BTN。ubg。出局=BTN。ubg。出去| |六月. BTN。ubg。出;
j.BTN。ubg。哈弗=BTN。ubg。悬停| |六月. BTN。ubg。悬停;
j.BTN。ubg。聚焦=BTN。ubg。聚焦| |君. BTN。ubg。专注;
j.BTN。dbg。出局=BTN。dbg。出去| |六月. BTN。dbg。出;
j.BTN。dbg。哈弗=BTN。dbg。悬停| |六月. BTN。dbg。悬停;
j.BTN。dbg。聚焦=BTN。dbg。聚焦| |君. BTN。dbg。专注;
j.Fn=j . Fn | | jun . Fn
var _ self=this
var Stime,Sp=0,Isup=0;
$(_self).CSS({溢出:'隐藏,位置:'相对,填充:' 0px ' });
var dw=$(_self).width(),dh=$(_self).height()-1;
var sw=j.W?parse int(j . W):21;
var sl=dw - sw
var bw=j.Btn.btn==true?SW:0;
如果($(_self).孩子('。JSC罗尔-c’).height()==null){//存在性检测
$(_self).wrap inner(' div class=' jscroll-c ' style=' top:0px;z指数:9999;缩放:1;position:relative '/div ');
$(_self).孩子('。JSC罗尔-c’).prepend(' div style=' height:0px;溢出:隐藏/div’);
$(_self).append(' div class=' jscroll-e ' unselect=' on ' style=' height:100%;top:0px;右:0;-moz-用户-选择:无;位置:绝对;溢出:隐藏;z指数:10000;div class=' jscroll-u ' style=' position:absolute;top:0px;宽度:100%;左:0;背景:蓝色;overflow:hidden '/div div class=' jscroll-h ' unselect=' on ' style=' background:green;位置:绝对;左:0;-moz-用户-选择:无;border:1px solid '/div div class=' jscroll-d ' style=' position:absolute;底部:0px宽度:100%;左:0;背景:蓝色;溢出:hidden '/div/div ');
}
var jscrollc=$(_self).孩子('。JSC罗尔-c’);
var jscrolle=$(_self).孩子('。JSC罗尔——e’);
var jscrollh=jscrolle.children(' .JSC罗尔-h’);
var jscrollu=jscrolle.children(' .JSC卷-u’);
var jscrolld=jscrolle.children(' .JSC罗尔-d’);
如果($。浏览器。msie){ document。exec命令('背景图像缓存',false,true);}
jscrollc。CSS({ '右填充':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,'背景-图像':j.BgUrl,'边框-颜色':j.Bar。BD。hover })},function(){if(Isup==0)$(this).css({background:j.Bar.Bg.Out,'背景-图像:j.BgUrl,'边框-颜色:j.Bar.Bd.Out})})
jscrollu。hover(function(){ if(Isup==0)$(this).背景: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).背景: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(sh10){sh=10}
var wh=sh/6//滚动时候跳动幅度
//sh=parse int(sh);
var curT=0,允许=假
jscrollh。身高(sh);
if(sch=DH){ jscrollc。CSS({ padding:0 });JSC罗尔。CSS({ display:' none ' })} else { allowS=true;}
if(j.Bar.Pos!='向上'){
curT=DH-sh-bw;
setT();
}
jscrollh.bind('mousedown ',函数(e){
j [[ Fn ]] j .调用(_ self);
ISUP=1;
jscrollh。CSS({背景:j . bar。BG。焦点,“背景-图像”:j.BgUrl})
var pageY=e.pageY,t=parseInt($(this).CSS(' top '));
$(文档)。鼠标移动(函数(e2){
curT=t E2。佩吉-佩吉;//佩吉浏览器可视区域鼠标位置,screenY屏幕可视区域鼠标位置
setT();
});
$(文档)。mouseup(function(){
ISUP=0;
jscrollh。CSS({背景:j . bar。BG。out,'背景图像':j.BgUrl,'边框颜色':j.Bar.Bd.Out})
$(文档)。unbind();
});
返回错误的
});
jscrollu.bind('mousedown ',函数(e){
j [[ Fn ]] j .调用(_ self);
ISUP=1;
jscrollu。背景:BTN。ubg。焦点,“背景-图像”:j.BgUrl})
_ self。timesett(' u ');
$(文档)。mouseup(function(){
ISUP=0;
jscrollu。背景:BTN。ubg。out,'背景图像':j.BgUrl})
$(文档)。unbind();
清除超时(Stime);
sp=0;
});
返回错误的
});
jscrolld.bind('mousedown ',函数(e){
j [[ Fn ]] j .调用(_ self);
ISUP=1;
jscrolld。背景:BTN。dbg。焦点,“背景-图像”:j.BgUrl})
_ self。timesett(' d ');
$(文档)。mouseup(function(){
ISUP=0;
jscrolld。背景:BTN。dbg。out,'背景图像':j.BgUrl})
$(文档)。unbind();
清除超时(Stime);
sp=0;
});
返回错误的
});
_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。时间设置(d);},t);
}
jscrolle.bind('mousedown ',函数(e){
j [[ Fn ]] j .调用(_ self);
curT=curT e . pagey-jscrollh。偏移量().top-sh/2;
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);
};
函数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)。鼠标滚轮(函数(){
如果(允许!=true)返回;
j['Fn'] j['Fn']。调用(_ self);
如果(这个。d0){ curT-=wh;} else { curT=wh};
setT();
})
});
}
});
对更多jQuery相关内容感兴趣的读者可以查看我们的专题:《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、0700-79000、《jQuery动画与特效用法总结》、《jquery选择器用法总结》、0755-79000和0755。
希望这篇文章对jQuery编程的大家有所帮助。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。