當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

oracle form 滚动条,jQuery实现的自定义滚动条实例详解

發布時間：2025/4/17 编程问答 45 豆豆

生活随笔收集整理的這篇文章主要介紹了 oracle form 滚动条,jQuery实现的自定义滚动条实例详解小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本文實例講述了jQuery實現的自定義滾動條。分享給大家供大家參考，具體如下：

可以自由的給滾動條定義背景，上下按鈕，當然不僅僅是顏色，連圖片當背景也可以。支持鼠標滾輪，點擊滾動條滾軸定位，上下按鈕久按加速，兼容 ie，firefox，chrome。

調用方法：

$("#a").jscroll();

demo：

demo

#a{width:500px;overflow:hidden;position:relative;height:200px;background:#f5f5f5;}

測試文字

底部

$(function(){

$("#a").jscroll();

});

高級應用(自定義滾動條背景及上下按鈕)：

調用圖片：

demo：

demo

#a{width:500px;overflow:hidden;position:relative;height:200px;background:#f5f5f5;}

測試文字

底部

$(function(){

$("#a").jscroll({

W:"15px", //設置滾動條寬度

BgUrl:"url(/images/s_bg2.gif)", //設置滾動條背景圖片地址

Bg:"right 0 repeat-y", //設置滾動條背景圖片position,顏色等

Bar:{

Pos:"bottom", //設置滾動條初始化位置在底部

Bd:{ //設置滾動滾軸邊框顏色：鼠標離開(默認)，經過

Out:"#a3c3d5",

Hover:"#b7d5e6"

Bg:{ //設置滾動條滾軸背景：鼠標離開(默認)，經過，點擊

Out:"-45px 0 repeat-y",

Hover:"-58px 0 repeat-y",

Focus:"-71px 0 repeat-y"

}

Btn:{

btn:true, //是否顯示上下按鈕 false為不顯示

uBg:{ //設置上按鈕背景：鼠標離開(默認)，經過，點擊

Out:"0 0",

Hover:"-15px 0",

Focus:"-30px 0"

dBg:{ //設置下按鈕背景：鼠標離開(默認)，經過，點擊

Out:"0 -15px",

Hover:"-15px -15px",

Focus:"-30px -15px"

}

Fn:function(){} //滾動時候觸發的方法

});

jquery.jscroll.js：

/**

* 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("

$(_self).children(".jscroll-c").prepend("

$(_self).append("

}

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瀏覽器可視區域鼠標位置，screenY屏幕可視區域鼠標位置

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

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

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();

})

});

}

});

希望本文所述對大家jQuery程序設計有所幫助。

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的oracle form 滚动条,jQuery实现的自定义滚动条实例详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： oracle 日志大于4g,Oracle
下一篇： oracle的39082,ORA-390