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

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

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

相关文章阅读

  • 使用jquery实现图片轮播效果如何,jQuery图片轮播
  • 使用jquery实现图片轮播效果如何,jQuery图片轮播,使用jQuery实现图片轮播效果
  • 举例说明jquery中each函数的使用,jquery each()
  • 举例说明jquery中each函数的使用,jquery each(),JQuery中each()的使用方法说明
  • 一篇文章带你了解jquery动画人物,一篇文章带你了解jquery动画制作
  • 一篇文章带你了解jquery动画人物,jquery的动画,一篇文章带你了解jQuery动画
  • trigger的用法总结,jquery trigger 传参数
  • trigger的用法总结,jquery trigger 传参数,jQuery中值得注意的trigger方法浅析
  • js hover 触发事件显示另一元素,js hover 触发事件,jQuery中多个元素的Hover事件解决方案
  • js apply 实现原理,jquery apply用法_1
  • js apply 实现原理,jquery apply用法
  • js apply 实现原理,jquery apply用法,js中apply方法的使用详细解析
  • js apply 实现原理,jquery apply用法,JS中apply()的应用实例分析
  • jq获取radio选中的值,jquery radio 取值
  • jq获取radio选中的值,jquery radio 取值,Jquery获取radio选中值实例总结
  • 留言与评论(共有 条评论)
       
    验证码: