<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="小蜡笔设计,小蜡笔ui设计,jquery滚动条插件jscroll" />
<meta name="description" content="改变滚动条" />
<meta name="googlebot" content="index,follow,archive" />
<meta name="BaiduSpider" content="index,follow,archive" />
<meta name="robots" content="index,follow"/>
<meta name="ruthor" content="小蜡笔ui设计"/>
<title>小蜡笔www.okajax.com欢迎收藏</title>
<style>
body{padding:10px 0 0px 0;margin:0; font-size:12px; color:#666666; line-height:20px;}
p.text{padding:10px; margin:10px; background:#f5f5f5; border:1px solid #ccc;}
.fontRed{ color:#FF0000}
.title{font-family:Verdana, Arial; font-weight:bold; font-size:14px; padding:0 20px}
.demo{ width:500px; margin:30px; font-size:12px; padding:1px; border:1px solid #ccc;}
.demo2{ border:1px solid #ccc; padding:1px; background:#fff; width:700px; margin:20px;}
.logo h1,.footer h1{ height:1px; overflow:hidden; padding:0; margin:0; line-height:20px; font-size:12px; display:block}
.footer { border-top:1px dotted #ccc; font-family:Verdana, Arial, Helvetica, sans-serif; background:#efefef}
.footer .copyRight{padding:20px; font-size:11px;}
.footer .copyRight p a{ text-decoration:none;}
pre.text{padding:10px; margin:10px; background:#f5f5f5; border:1px solid #ccc;}
.img{ border:1px solid #efefef; padding:1px; background:#fff; width:99px; margin:0 0 0 20px}
#tt,#cc,#ee{background:#f5f5f5; height:100px;}
.download{font-size:18px; font-family:Verdana, Arial, Helvetica, sans-serif; padding:20px}
</style>
<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script language='javascript' src='jscroll.js'></script>
<script type="text/javascript">
/*--------------------------------------------------------------------------------------------------*/
$(document).ready(function(){
$("#tt").jscroll();
$("#cc").jscroll({W:"12px"});
$("#ee").jscroll({W:"12px",Btn:{btn:false}});
/*---------------------------------------------------------以下为自定义滚动条样式，设置时注意逗号--------------*/
$(".dd").jscroll({ W:"15px"//设置滚动条宽度
,BgUrl:"url(tpImg/s_bg.gif)"//设置滚动条背景图片地址
,Bg:"right 0 repeat-y"//设置滚动条背景图片position,颜色等
,Bar:{Pos:"bottom"//设置滚动条初始化位置在底部
,Bd:{Out:"#bcbcbc",Hover:"#ccc"}//设置滚动滚轴边框颜色：鼠标离开(默认)，经过
,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(){}//滚动时候触发的方法
});
});
</script>
</head>
<body>
<div class="logo">
<a href="http://www.xlabi.com/" ><h1>漂亮的滚动条,自定义滚动条,自定义滚动条样式,兼容firefox,谷歌</h1>
<img src="http://www.xlabi.com/images/logo.gif" border="0" alt="自定义滚动条样式" />
</a>
</div>
<p class="text"><b>可以自由的给滚动条定义背景，上下按钮，当然不仅仅是颜色，连图片当背景也可以。</b><span class="fontRed">支持鼠标滚轮，点击滚动条滚轴定位，上下按钮久按加速，兼容firefox,谷歌</span></p>
<p class="text">$("#tt").jscroll();//默认调用 </p>
<p class="title">demo:(滚轴初始化位置：底部)</p>
<div class="img"><img src="tpImg/s_bg.gif" border="0" alt="所用图片" /></div>
<div class="demo2" ><!--加条线 好看点 哈哈-->
<div class="dd" style="height:200px;"><!--padding会被取消-->
<div style="padding:5px"><!--padding这里设置-->
<b>顶部</b>
<p>我的class为dd</p>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
<p>我的class为dd</p>
<p>www.xlabi.com</p>
<b>底部</b>
</div>
</div>
</div>
</body>
</html>
jQuery滚动条插件 jScrollPane
5星 · 超过95%的资源 需积分: 12 17 浏览量
2012-04-17
16:23:09
上传
评论
收藏 33KB ZIP 举报 
jscroll.zip （8个子文件） 
jscroll 
index.html 4KB tpImg 
s_bg.gif 1KB s_bg5.gif 2KB s_bg2.gif 1KB s_bg4.gif 2KB s_bg3.gif 1KB
jquery.js 56KB jscroll.js 7KB
zai1982
- 粉丝: 0
- 资源: 13
- 1
- 2
- 3
- 4
前往页