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:
/**
*
* 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;//滚动方向
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程序设计有所帮助。
oracle form 滚动条,jQuery实现的自定义滚动条实例详解相关推荐
- php能调用easyui窗口,关于jQuery EasyUI window窗口使用实例详解
本文主要给大家介绍了jQuery EasyUI window窗口使用功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家. 需求:点击[增加]按钮,弹出窗口,并对所有 ...
- php显示当前访问人数,PHP与jquery实时显示网站在线人数实例详解
我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率等等,前端页面需要实时刷新获取最新数据.本文将结合实例给大家介绍使用jQuery和PHP来实现动态数字展示效果. 本例假设要在 ...
- 微信小程序中form 表单提交和取值实例详解
2019独角兽企业重金招聘Python工程师标准>>> 我们知道,如果我们直接给 input 添加 bindinput,比如:<input bindinput="on ...
- mvc jquery ajax分页实例,jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页...
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页 简单的两个步骤即可实现分页功能 //回调里面进行业务处理 function lo ...
- layui单选框verify_layui lay-verify form表单自定义验证规则详解
虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底放哪. html: 提交 js: form.verify({ //数组 ...
- oracle几种例外,Oracle例外用法实例详解
本文实例讲述了Oracle例外用法.分享给大家供大家参考,具体如下: 一.例外分类 oracle将例外分为预定义例外.非预定义例外和自定义例外三种. 1).预定义例外用于处理常见的oracle错误. ...
- oracle 记录给游标,Oracle游标 CURSOR实例详解
一.游标概述: 游标(cursor)是数据库系统在内存中开设的一个数据缓冲区,存放SQL语句的执行结果. 每个游标都有一个名字,用户可以用SQL语句逐一从游标中获取记录,并赋给变量做进一步处理. 作用 ...
- oracle身份证的正则表达式,Oracle 正则表达式实例详解
Oracle 正则表达式实例详解 FORM开发中的按行拆分需求:拆分后的行要有规律,并按前后层次排序 需求分析如下: 现有行: 2 , 2.1 , 2.2 , 2.3 3 2.1.1,2.1.2,2. ...
- html css data-,HTML+CSS入门 HTML自定义data属性详解
本篇教程介绍了HTML+CSS入门 HTML自定义data属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 可以在HTML标签上添加任意以 "data-&q ...
最新文章
- 如何在Windows Server 2008 Core里面添加Role~~~
- 12种主要的Dropout方法:用于DNNs,CNNs,RNNs中的数学和可视化解释
- Java 访问RabbitMQ
- 超好的Git学习网站
- dcom配置_spring cloud 二代架构依赖组件 全配置放送
- Python:List、tuple、dict、set
- 转:Mac文件权限操作详细记录
- 写一个生产者消费者的例子
- 解决Chrome、360自动填充用户名和密码行为带来的困扰
- 浏览器拍照功能(Vue+ElementUI组件)
- Thimax膳美师牛排机体验:做一份顶级牛排,简直0难度!
- 每秒1.28万亿行,最快的分布式关系数据库MemSQL又破记录了!
- https://www.atlassian.com
- office2013安装包
- ESP8266-12 wifi芯片使用教程1——串口输出Hello world
- Crx mouse配置文件
- 程序员专属的免费编程文本编辑器-----PSPad
- 明朝第一才子杨慎十首诗词
- 数据库RocksDB优化方案
- SaaS模式在国内的基本现状研究
热门文章
- cacti监控下添加对磁盘io的监控方法(Linux主机和Windows主机)
- cocos2d-x学习笔记16:记录存储1:CCUserDefault
- 一个小网管的淘金梦----深圳往事(4)
- PostgreSQL中Timestamp转成世纪秒(Unix时间戳)
- 2019.4.1考试2019.4.2考试2019.4.4考试
- 【CF526F】Pudding Monsters
- Java问题解决:Java compiler level does not match the version of the installed Java project facet....
- PHP 模拟POST请求
- throws和throw抛出异常的使用规则
- Caliburn笔记-基本Command(wpf框架)