浙江 杭州

jQuery和CSS3带过渡效果的全屏垂直翻页特效插件

系统分类: 网页特效 - jquery插件 - jQuery页面滚动 2015-10-08

人气13512

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


                                       FSVS(Full Screen Vertical Scroller)是一款jQuery和CSS3带过渡效果的全屏垂直翻页特效插件。该全屏翻页插件在页面上下滚动时一次翻一屏,并带有CSS3过渡动画效果。

FSVS(Full Screen Vertical Scroller)是一款jQuery和CSS3带过渡效果的全屏垂直翻页特效插件。该全屏翻页插件在页面上下滚动时一次翻一屏,并带有css3过渡动画效果。它的效果和OnePageScroll.js类似,但使用上要简单得多。

使用方法

HTML结构

注意:fsvs需要在HTML元素上指定特定的CLASS。

<!doctype html>
<html class="fsvs" lang="en">
    <head>
        <link href="assets/css/style.css" media="all" rel="stylesheet" type="text/css" />
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="assets/js/bundle.js"></script>
    </head>
    <body>
        <div id="fsvs-body">
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
        </div>
    </body>
</html>

 

初始化插件
$(document).ready( function() {
    var slider = $.fn.fsvs({
        speed : 5000,
        bodyID : 'fsvs-body',
        selector : '> .slide',
        mouseSwipeDisance : 40,
        afterSlide : function(){},
        beforeSlide : function(){},
        endSlide : function(){},
        mouseWheelEvents : true,
        mouseWheelDelay : false,
        scrollabelArea : 'scrollable',
        mouseDragEvents : true,
        touchEvents : true,
        arrowKeyEvents : true,
        pagination : true,
        nthClasses : false,
        detectHash : true
    });
    //slider.slideUp();
    //slider.slideDown();
    //slider.slideToIndex( index );
    //slider.unbind();
    //slider.rebind();
});

 

上面的参数都很简单,见其名就知其义。

更多关于该全屏翻页插件的信息可以参考:http://luke.sno.wden.co.uk/full-screen-vertical-scroll。

github:https://github.com/lukesnowden/FSVS

查看演示
下载资源:1
下载资源
错误提交:

格式:zip 大小:106.35KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-803.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery和CSS3带过渡效果的全屏垂直翻页特效插件

我当前G币余额:0 已下载次数:1

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有0 评论)