欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

手机上下翻页特效

shiping 的头像
谷歌 "html5上下翻页"

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

 下载见  HTML5手机页面触屏滑动上下翻页特效_特效不明显.zip
当前位置:主页 > jQuery库 > 布局和界面 > jQuery和CSS3带过渡效果的全屏垂直翻页特效插件
jQuery和CSS3带过渡效果的全屏垂直翻页特效插件
 分享:
 

插件介绍

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

     

    浏览器兼容性

    浏览器兼容性
       时间:2015-03-02
       阅读:4519
         
         
         
        简要教程

        FSVS(Full Screen Vertical Scroller)是一款jQueryCSS3带过渡效果的全屏垂直翻页特效插件。该全屏翻页插件在页面上下滚动时一次翻一屏,并带有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




        HTML5超炫手机页面触屏滑动上下翻页特效

                         下载见  HTML5手机页面触屏滑动上下翻页特效_特效明显.zip   
          
        • 全分享 发表于
        •  
        •  2015-08-24
        •  
        •  (696)
        •  
        •  

        HTML5超炫手机页面触屏滑动上下翻页特效

        QQ图片20150824225330.jpg

        QQ图片20150824225309.jpg

        QQ图片20150824225316.jpg

        QQ图片20150824225237.jpg

         

        在线DEMO

        1440429075907427.png

         

        文件尺寸338.45 KB
        下载次数142
        来自 http://www.aweb.cc/article/detail/id/413.html

        普通分类: