zepto.fullpage

内容来自：颜海镜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    
    <title>Document</title>
    <style>
    /*global.css*/
    .wp{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;            
    }
    .page{
        font-size: 72px;
        line-height: 320px;
        text-align: center;
    }
    .page1{
        background: red;
    }
    .page2{
        background: yellow;
    }
    .page3{
        background: maroon;
    }
    .page4{
        background: green;
    }

    /* 箭头 */
    /*@-webkit-keyframes start {
        0%,30% {
            opacity: 0.2;
            -webkit-transform: translate(0,10px);
        }
        60% {
            opacity: 1;
            -webkit-transform: translate(0,0);
        }
        100% {
            opacity: 0.2;
            -webkit-transform: translate(0, -5px);
        }
    }
    @keyframes start {
        0%,30% {
            opacity: 0.2;
            transform: translate(0,10px);
        }
        60% {
            opacity: 1;
            transform: translate(0,0);
        }
        100% {
            opacity: 0.2;
            transform: translate(0, -5px);
        }
    }*/
    @-webkit-keyframes start{
        from{
            opacity: 1;
        }
        to{
            -webkit-transform:translate(-100%);
            opacity: 0;
        }
    }
    @keyframes start{
        from{
            opacity: 1;
        }
        to{
            transform:translateY(-100%);
            opacity: 0;
        }
    }
    .start{
        position: fixed;
        top: 95%;
        left: 50%;
        margin-left: -17px;
        margin-top: -34px;
        width: 34px;
        height: 34px;
    }
    .start b{
        position: absolute;
        top: 10px;
        left: 50%;
        margin-left: -9px;
        width: 19px;
        height: 12px;
        background: url(img/arrow.png);
        background-size: 100% 100%;
        -webkit-animation: start 1.5s  ease infinite;
        animation: start 1.5s  ease infinite;
    }        
    /*fullpage.css*/
    .fullPage-wp{   
        -webkit-transform: translate3d(0,0,0);     
        transform: translate3d(0,0,0);     
    }
    .fullPage-wp:after {
        display: block;
        content: ' ';
        height: 0;
        clear: both;
    }
    .fullPage-wp.anim{
        -webkit-transition: all 500ms ease-out 0s;
        transition: all 500ms ease-out 0s; 
    }
    .fullPage-page{
        display: block;
        overflow: hidden;
    }

    .fullPage-dir-h {
        float: left;
    }

    /*this page css*/
    [data-dir]{
        position: absolute;
        z-index: 9999;
    }
    [data-dir]:nth-child(1){
        top: 100px;
        right: 0;        
    }
    [data-dir]:nth-child(2){
        top: 140px;
        right: 0;        
    }

    .indicator{
        position: fixed;
        right: 10px;
        top: 50%;
        margin-top: -40px;
    }
    .indicator li{
        margin-top: 10px;
        width: 10px;
        height: 10px;
        border-radius: 100px;
        background: rgba(0,0,0,0.5);
        text-indent: -9999px;
        list-style: none;
    }
    .indicator li.cur{
        background: rgba(255,255,255,0.5);
    }
    </style>
</head>
<body>
    <div class="wp">
        <a href="" id="prev" data-dir="movePrev">向前</a>
        <a href="" id="next" data-dir="moveNext">向后</a>
        <div class="wp-inner">
            <div class="page page1">1</div>
            <div class="page page2">2</div>
            <div class="page page3">3</div>
            <div class="page page4">4</div>
        </div>
        <ul class="indicator">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <span class="start"><b></b></span>
    <script src="js/zepto.min.js"></script>
    <script src="js/zepto.fullpage.js"></script>
    <script>
        $('.wp-inner').fullpage({
            page: '.page',
            start: 0,
            duration: 500,
            drag: false,
            loop: false,
            dir: 'v',
            der:0.1,//当滑动距离大于一个值时，才会引起滑动现象，滑动距离=der*屏幕高度|宽度
            change: function (e) {
                console.log('change', e.next, e.cur);
                $('.indicator li').removeClass('cur').eq(e.cur).addClass('cur');
            },
            beforeChange: function (e) {
                console.log('beforeChange', e.next, e.cur);
            },
            afterChange: function (e) {
                console.log('afterChange', e.next, e.cur);
            },
            orientationchange: function () {}
        });

        $("#prev,#next").on('click',function(e){
            e.preventDefault();
            $.fn.fullpage[$(this).data('dir')](true);
        });


        // update:此方法会重新计算和渲染每屏的高度，当你发现如果每屏的高度有问题时，手动调用下此方法就可以了。
        // moveTo:切换到指定屏，如果指定的屏数大于屏总数或小于0，都会做修正处理。
        // movePrev:向前一屏，是对moveTo的封装。
        // moveNext:向后一屏，是对moveTo的封装。
        // start:开启切换功能，和stop配合使用。丰富页面功能，比如到了某页需要点击某个元素后才能到下一页的时候 这个就有用了～～
        // stop:关闭切换功能，和start配合使用。
        // getCurIndex:获取当前位于第几屏的方法。
    </script>
</body>
</html>

 

posted @ 2015-11-02 14:41  DuangDang  阅读(300)  评论(0)  编辑  收藏  举报