jquery滚动条滚动事件,jquery滑动条,jQuery实现的自定义滚动条实例详解

本文主要介绍了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

/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

/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:

/**

* 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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读