jScrollPane滚动条插件

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

引入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.sucaihuo.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.sucaihuo.com/js/6.html">
        <img src="images/thumbs/15.jpg"/>
        <div>
            <h3>flexslider图片轮播、多图相册滑动(支持触屏版)</h3>
            Flexslider是一款jQuery滚动插件，代码非常简洁，拓展性很高。可创建图片轮播效果、焦点图效果、图文混排滚动效果，支持手机端等移动设备滑动。
        </div>
    </a>
    <a target="_blank" href="http://www.sucaihuo.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
    })
});