所属分类:网页特效-UI/布局/瀑布流,触屏/拖拽/下拉
jScrollPane是一个设计非常灵活的跨浏览器的jQuery插件 ,它将浏览器的默认滚动条或是元素溢出时出现的滚动条映射成一个HTML结构,从而很容易地使用CSS来定义滚动的样式。下面来看下这个强大而灵活的jScrollPane的使用方法吧。
引入核心文件,为了更方便的使用,这里引入了mousewheel库
<!-- 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" />
<script src="http://www.sucainiu.com/themes/cdn/jquery/jquery-1.10.2.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>
<div class="scroll-pane">
....内容
</div>
$(function() {
$('.scroll-pane').jScrollPane();
});
$('.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)//滑动轨迹上的重复频率
);