jScrollPane滚动条插件

收藏

本文演示了jScrollPane两种调用方法：滚动条可见和滚动条不可见。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

引入jscrollpane插件

<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.codrops1.css" />
<script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>

HTML

<div id="jp-container" class="jp-container">
    <a target="_blank" href="http://www.erdangjiade.com/js/1.html">
        <img src="images/thumbs/16.jpg"/>
        <div>
            <h3>jQuery仿天猫完美加入购物车</h3>
            素材火网页特效第一个demo：超炫加入购物车效果，和天猫、聚美优品加入购物车效果相媲美。本文介绍一款加入购物车插件jquery.fly.min.js,点击加入购物车,物品以抛物线动画效果到达购物车。 </div>
    </a>
    <a target="_blank" href="http://www.erdangjiade.com/js/6.html">
        <img src="images/thumbs/15.jpg"/>
        <div>
            <h3>flexslider图片轮播、多图相册滑动(支持触屏版)</h3>
            Flexslider是一款jQuery滚动插件，代码非常简洁，拓展性很高。可创建图片轮播效果、焦点图效果、图文混排滚动效果，支持手机端等移动设备滑动。
        </div>
    </a>
    <a target="_blank" href="http://www.erdangjiade.com/js/23.html">
        <img src="images/thumbs/14.jpg"/>
        <div>
            <h3>jQuery Timelinr时间轴插件</h3>
            jQuery Timelinr时间轴插件可以滑动切换、水平和垂直滚动、支持键盘方向键，并且支持鼠标滚轮。.
        </div>
    </a>
</div>

调用jScrollPane

$(function() {
    $('#jp-container').jScrollPane({
        verticalGutter: -16
    })
});