<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jquery滚动条美化插件 - 网页模板</title>
<!-- styles specific to demo site -->
<link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
<!-- styles needed by jScrollPane - include in your own sites -->
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<!-- the styles for the lozenge theme -->
<link type="text/css" href="style/jquery.jscrollpane.lozenge.css" rel="stylesheet" media="all" />
<style type="text/css" id="page-css">
/* Styles specific to this particular page */
.scroll-pane, .scroll-pane-arrows {
width: 100%;
height: 200px;
overflow: auto;
}
.horizontal-only {
height: auto;
max-height: 200px;
}
</style>
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- the mousewheel plugin -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" id="sourcecode">
$(function() {
$('.scroll-pane').jScrollPane();
$('.scroll-pane-arrows').jScrollPane({
showArrows:true,horizontalGutter:10
});
});
</script>
</head>
<body>
<div id="container">
<h2><font size="20">修改滑动杆的样式</font></h2>
<h2>使用方法</h2>
<pre >
$('.scroll-pane').jScrollPane(
showArrows - boolean (default false)//显示滑杆两边的箭头
maintainPosition - boolean (default true)//保持原位置
stickToBottom- boolean (default false)//滑到底部
stickToRight- boolean (default false)//湖大道最右边
autoReinitialise - boolean (default false)//自动加载出现滑杆
autoReinitialiseDelay - int (default 500)//自动加载的时间延迟
verticalDragMinHeight - int (default 0)//垂直拖拽的最小高度
verticalDragMaxHeight - int (default 99999)//处置拖拽的最大高度
horizontalDragMinWidth - int (default 0)//水平拖拽的长度
horizontalDragMaxWidth - int (default 99999)//水平拖拽的最大长度
contentWidth - int (default undefined)//内幕内用的宽度
animateScroll - boolean (default false)//滚动动画
animateDuration - int (default 300)//动画延迟
animateEase - string (default 'linear')//动画轨迹
hijackInternalLinks - boolean (default false)//截获内部链接
verticalGutter - int (default 4)//处置不掉长度
horizontalGutter - int (default 4)//水平不掉长度
mouseWheelSpeed - int (default 10)//鼠标疼速度
arrowButtonSpeed - int (default 10)//方向键按钮的速度
arrowRepeatFreq - int (default 100)//按钮事件重复频率
arrowScrollOnHover - boolean (default false)//接手鼠标在方向键上滑过的动作
verticalArrowPositions - string [split|before|after|os] (default split)//垂直方向上按钮的位置
horizontalArrowPositions - string [split|before|after|os] (default split)//水平方向上按钮的位置
enableKeyboardNavigation - boolean (default true)//是否接受键盘操作
hideFocus - boolean (default false)//隐藏焦点
clickOnTrack - boolean (default true)//路径上点击操作
trackClickSpeed - int (default 30)//互动轨迹上的点击速度
trackClickRepeatFreq - int (default 100)//滑动轨迹上的重复频率
);
</pre>
<h2>仅显示垂直不带箭头滑杆</h2>
<div class="scroll-pane">
<p>
分享——进步的不竭动力！
讨论可以明智，交流能够提升。所谓“三人行，必有我师”。一个人的知识、时间和能力是有限的，但集体的力量是无穷的。
也许，你冥思苦想了一整天，却没有想到解决问题的方法；
也许，你辛苦奋战了一整夜，离成功那么遥远，但却迈不过那道坎。
很多时候，我们就像一只玻璃这边的鸟，看到别人的世界无限精彩，看到别人的作品美妙绝伦，但自己却找不到走入这个世界的道路。
但交流、讨论和分享，能够让你走出尘封的桎梏，获取成功的果实。
你将技术传授给了他人，他人创新了你的技术；
你将作品分享给了他人，他人延伸了你的作品。
把你的经验和作品分享出来，大家一起讨论交流，让你的思路和技术得到不断的完善，让你突破自己的珈琐、更上一层楼，让你的作品更加完美，让你得到一大批的粉丝！
朋友，这就是分享的魅力！
愿意无私分享作品的网友可以通过以下途径分享
1、先加入Jquery学堂QQ群（244127054），然后直接找到群主，将作品发给群主发布
2、可以将作品直接发到以下邮箱：564053479@qq.com
备注：
1、分享网友的原创作品写上自己的版权信息
2、写上相关的注释说明，方便网友们学习
分享是件奇怪的东西，绝不因为你分给了别人而减少。有时你分给别人的越多，自己得到的也越多。
</p>
<p>
分享——进步的不竭动力！
讨论可以明智，交流能够提升。所谓“三人行，必有我师”。一个人的知识、时间和能力是有限的，但集体的力量是无穷的。
也许，你冥思苦想了一整天，却没有想到解决问题的方法；
也许，你辛苦奋战了一整夜，离成功那么遥远，但却迈不过那道坎。
很多时候，我们就像一只玻璃这边的鸟，看到别人的世界无限精彩，看到别人的作品美妙绝伦，但自己却找不到走入这个世界的道路。
但交流、讨论和分享，能够让你走出尘封的桎梏，获取成功的果实。
你将技术传授给了他人，他人创新了你的技术；
你将作品分享给了他人，他人延伸了你的作品。
把你的经验和作品分享出来，大家一起讨论交流，让你的思路和技术得到不断的完善，让你突破自己的珈琐、更上一层楼，让你的作品更加完美，让你得到一大批的粉丝！
朋友，这就是分享的魅力！
愿意无私分享作品的网友可以通过以下途径分享
1、先加入Jquery学堂QQ群（244127054），然后直接找到群主，将作品发给群主发布
2、可以将作品直接发到以下邮箱：564053479@qq.com
备注：
1、分享网友的原创作品写上自己的版权信息
2、写上相关的注释说明，方便网友们学习
分享是件奇怪的东西，绝不因为你分给了别人而减少。有时你分给别人的越多，自己得到的也越多。
</p>
<p>
分享——进步的不竭动力！
讨论可以明智，交流能够提升。所谓“三人行，必有我师”。一个人的知识、时间和能力是有限的，但集体的力量是无穷的。
也许，你冥思苦想了一整天，却没有想到解决问题的方法；
也许，你辛苦奋战了一整夜，离成功那么遥远，但却迈不过那道坎。
很多时候，我们就像一只玻璃这边的鸟，看到别人的世界无限精彩，看到别人的作品美妙绝伦，但自己却找不到走入这个世界的道路。
但交流、讨论和分享，能够让你走出尘封的桎梏，获取成功的果实。
你将技术传授给了他人，他人创新了你的技术；
你将作品分享给了他人，他人延伸了你的作品。
把你的经验和作品分享出来，�
jquery滚动条美化插件.zip
版权申诉
137 浏览量
2022-11-21
11:31:49
上传
评论
收藏 138KB ZIP 举报
jquery滚动条美化插件.zip （12个子文件） 
jquery滚动条美化插件 
jquery滚动条美化插件.jpg 113KB jiaoben404 style 
demo.css 3KB jquery.jscrollpane.lozenge.css 1KB jquery.jscrollpane.css 1KB image 
ui-icons_222222_256x240.png 4KB ui-icons_cd0a0a_256x240.png 4KB ui-icons_888888_256x240.png 4KB
index.html 27KB js mwheelIntent.js 2KB jquery.mousewheel.js 2KB jquery.jscrollpane.js 45KB jquery.jscrollpane.min.js 15KB资源评论
