shangshang
/
hhqtest


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404
							<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
  <link rel="stylesheet" href="../style/weui2.css"/>
  <link rel="stylesheet" href="../style/weui3.css"/>
      <script src="../zepto.min.js"></script>
	  <script src="../fullpage.js"></script>
 <style>
   .page-wrap {
    width: 100%;
    height: 100%;
}

.page {
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

.page:first-child {
    background-color: #7B68EE;
}

.page:nth-child(2) {
    background-color: #00BFFF;
}

.page:nth-child(3) {
    background-color: #ff8c81;
}

.page:last-child {
    background-color: #40E0D0;
}


.arrow{
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 33px;
    height: 18px;
    margin-left: -16px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAAkBAMAAADP1/GcAAAAIVBMVEUAAAD////////////////////////////////////////PIev5AAAACnRSTlMA7THqZCykIw4N2Qp8/wAAAKJJREFUOMuF0yEOwkAQheEJhmArUUu4ARIFFgUSh+YUOM7R4PaU0FS8hD/5O6KdmX37ua2/2txrofaf5oHVtg+e2PU+NifGcx+cGH6hpkSbUkrMMSPmnBJAQAiSgyAkkhUiYSGSJiFIdskbQYQbIlnwSmbcwUgEkyAZgKAnktaQdERAEAEBJD9BQAC5TR9BrvWcCEEedTnoUz+eav0qq3ct1xewUzlrRHoptQAAAABJRU5ErkJggg==) no-repeat;
    background-size: 33px auto;
    opacity: 0;
}

.arrow-h{
    position: absolute;
    right: 10px;
    top: 50%;
    width: 33px;
    height: 18px;
    margin-top: -9px;
    opacity: 0;
}

.arrow-h i{
    display: block;
    width: 33px;
    height: 18px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAAkBAMAAADP1/GcAAAAIVBMVEUAAAD////////////////////////////////////////PIev5AAAACnRSTlMA7THqZCykIw4N2Qp8/wAAAKJJREFUOMuF0yEOwkAQheEJhmArUUu4ARIFFgUSh+YUOM7R4PaU0FS8hD/5O6KdmX37ua2/2txrofaf5oHVtg+e2PU+NifGcx+cGH6hpkSbUkrMMSPmnBJAQAiSgyAkkhUiYSGSJiFIdskbQYQbIlnwSmbcwUgEkyAZgKAnktaQdERAEAEBJD9BQAC5TR9BrvWcCEEedTnoUz+eav0qq3ct1xewUzlrRHoptQAAAABJRU5ErkJggg==) no-repeat;
    background-size: 33px auto;
    -webkit-transform: rotate(-90deg);
}

.current .arrow {
    -webkit-animation: swipeMoveTop 1.5s 1s ease infinite;
}

.current .arrow-h {
    -webkit-animation: swipeMoveLeft 1.5s 1s ease infinite;
}

/*上滑提示*/
@-webkit-keyframes swipeMoveTop {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 10px, 0);
    }
    70% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -10px, 0);
    }
}

/*左滑提示*/
@-webkit-keyframes swipeMoveLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(10px, 0, 0);
    }
    70% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(-10px, 0, 0);
    }
}

@-webkit-keyframes slideToTop {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
    }
}


/*自定义*/
.title {
    width: 100%;
    text-align: center;
    padding-top: 40px;
    color: #000;
    font-size: 18px;
    opacity: 0;
}

.subtitle {
    width: 100%;
    text-align: center;
    padding-top: 20px;
    color: #000;
    font-size: 16px;
    opacity: 0;
}
        .current .title{
            -webkit-animation: slideToTop .8s ease both;
        }

        .current .subtitle{
            -webkit-animation: slideToTop .8s 0.3s ease both;
        }
</style>
      <script>
  $(function(){

	  
	  });    
 
      </script>
</head>

<body ontouchstart>
<div class="page-wrap">
    <div class="page">
        <div class="title">PageSlider是全屏滑动,支持上下翻页,禁止翻页,超出一屏先翻页再滑动,完美的全屏滑动组件,微信官方出品,只有6kb大小js,调用fullpage.js即可,css见演示页面</div>
        <div class="subtitle"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArIAAAGFBAMAAADzwA07AAAAIVBMVEXr6+vPz8/X19fp6ene3t7k5OTm5ubh4eHT09Pb29vR0dHqLrSfAAACyklEQVR42uzBgQAAAACAoP2pF6kCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGB27GdHaSiO4vgJ5e+s5lzAFlZ2Y1yWoIm6AjPJbItG3VJdmLiiOg9Aow8AybinK1/Tey9ldDttl+eTFC6w+4b+2luRNi2XcIJl8v/H6quHhf9BHiXnFlbGE6wep/D8+gm8Dp8CnEAeJePOBz4n7XKssi254gFWzEkVUWVb0uEeVklz7rxS2ZYM/PnfZ8zEz4atyrYkYOjn63emAPI5VLYtxczHe+HnbWxc7K9fVLYFxwjAIur5eVuGQLcgn6lsczkTYDNDOQb6Nma/oJWqbGMLV/EYIg6BAffIaG5iTlW2sSFXQDFGblzDAwqTIIi5VdmmRrZbYI/F3FXeDbj3uQ8q29SA1/ZYYcgtFkzeMAXQ50llmwo4RYcpRlwhj5DN4RShyjZWTHA1Bwa233Fm435w4onKNnY0yAwQ8BrFFGuezVS2sc0c6xBAPA04Rswz8+9Z7VBl61lwG48BrCd+IEQ33i36DB8eNKpsHUP+KPcAMuMvYgYXnFzS71S2jhF/8+D/mq+YIotwURh4GVOVraPHXy4dOsznfrNb3XUh9kv3nqhsHQEjlw5dFsa97qudAnK/RI8GKltLTANfkyEQlFECfOMBGDFKAaw5Vtl61lW1wifMaW7fMkpcZJr7u+fkTmXr2VRbgqM/+3slrZ+wPtP7A5WtZ8FTVfgA63VhYyZw3tGaJSrbkuDTe1Re3t1/hIiIiIiIiIiIiIj8ZQ8OBAAAAACA/F8bQVVVVVVVVVVVVVVVVVVVhT04EAAAAAAA8n9tBFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVpT04JAAAAAAQ9P+10RMAAAAAAAAAAAAAAADAArTtXKLPR7LcAAAAAElFTkSuQmCC" style="display: block; max-width:100%;height:100%;width:100%"></div>
        <div class="arrow"></div>
    </div>

    <div class="page" style="-webkit-overflow-scrolling: touch;">
    <div class="page__inner" style="position: relative; height:auto;">
        <div class="title">赶紧来测试下看看你的皮肤几岁了</div>
        
        <p class="f14 tleft" style="margin:0 10px 10px 15px;line-height:22px;color: #fff;">有的人二十几岁，皮肤就有了松弛的迹象，有的人四十岁却拥有如玉的肌肤。想知道你的肌肤状况吗？那先来做个测试把。</p>
        <div style=" color: #888;font-size: 14px; margin-bottom:0px;padding-left: 15px;padding-right: 15px;line-height:14px;" class='tleft'>肌肤测试</div>
        
<!--内容开始-->   
<div class="weui_cells weui_cells_checkbox tleft" style='margin-top:5px;'>

            <label class="weui_cell weui_check_label" for="s0">
                <div class="weui_cell_hd">
                    <input class="weui_check" name="checkbox" id="s0"  type="checkbox">
                    <i class="weui_icon_checked"></i>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <p>洗完脸拍上化妆水后，感觉水分立刻被吸干。</p>
                </div>
            </label>
          
             <label class="weui_cell weui_check_label" for="s1">
                <div class="weui_cell_hd">
                    <input class="weui_check" name="checkbox" id="s1"  type="checkbox">
                    <i class="weui_icon_checked"></i>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <p>眼部出现细小的皱纹，笑起来尤为明显。</p>
                </div>
            </label>
          
             <label class="weui_cell weui_check_label" for="s2">
                <div class="weui_cell_hd">
                    <input class="weui_check" name="checkbox" id="s2"  type="checkbox">
                    <i class="weui_icon_checked"></i>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <p>鼻部的毛孔就算没有黑头，也非常粗大。</p>
                </div>
            </label>
          
             <label class="weui_cell weui_check_label" for="s3">
                <div class="weui_cell_hd">
                    <input class="weui_check" name="checkbox" id="s3"  type="checkbox">
                    <i class="weui_icon_checked"></i>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <p>眼下形成眼袋，熬夜后水肿更加严重。</p>
                </div>
            </label>
          
             <label class="weui_cell weui_check_label" for="s4">
                <div class="weui_cell_hd">
                    <input class="weui_check" name="checkbox" id="s4"  type="checkbox">
                    <i class="weui_icon_checked"></i>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <p>在冬季，如果只使用乳液会感到不够滋润。</p>
                </div>
            </label>
          
             <label class="weui_cell weui_check_label" for="s5">
                <div class="weui_cell_hd">
                    <input class="weui_check" name="checkbox" id="s5"  type="checkbox">
                    <i class="weui_icon_checked"></i>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <p>出现色斑，肤色不均，肤色黯沉，气色不佳。</p>
                </div>
            </label>
          
             <label class="weui_cell weui_check_label" for="s6">
                <div class="weui_cell_hd">
                    <input class="weui_check" name="checkbox" id="s6"  type="checkbox">
                    <i class="weui_icon_checked"></i>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <p>肌肤非常干燥，但出油又较为严重。</p>
                </div>
            </label>
          
             <label class="weui_cell weui_check_label" for="s7">
                <div class="weui_cell_hd">
                    <input class="weui_check" name="checkbox" id="s7"  type="checkbox">
                    <i class="weui_icon_checked"></i>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <p>洗完脸后，肌肤表面粗糙，没有柔滑感。</p>
                </div>
            </label>
          
             <label class="weui_cell weui_check_label" for="s8">
                <div class="weui_cell_hd">
                    <input class="weui_check" name="checkbox" id="s8"  type="checkbox">
                    <i class="weui_icon_checked"></i>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <p>使用护肤品时手法很随意。</p>
                </div>
            </label>
          
             <label class="weui_cell weui_check_label" for="s9">
                <div class="weui_cell_hd">
                    <input class="weui_check" name="checkbox" id="s9"  type="checkbox">
                    <i class="weui_icon_checked"></i>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <p>脸上的毛孔越来越粗大，并且呈椭圆形。</p>
                </div>
            </label>
          
             <label class="weui_cell weui_check_label" for="s10">
                <div class="weui_cell_hd">
                    <input class="weui_check" name="checkbox" id="s10"  type="checkbox">
                    <i class="weui_icon_checked"></i>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <p>法令纹明显，两颊肌肤有下垂的倾向。</p>
                </div>
            </label>
          
             <label class="weui_cell weui_check_label" for="s11">
                <div class="weui_cell_hd">
                    <input class="weui_check" name="checkbox" id="s11"  type="checkbox">
                    <i class="weui_icon_checked"></i>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <p>经常12点后入睡，常熬夜工作等。</p>
                </div>
            </label>
          
             <label class="weui_cell weui_check_label" for="s12">
                <div class="weui_cell_hd">
                    <input class="weui_check" name="checkbox" id="s12"  type="checkbox">
                    <i class="weui_icon_checked"></i>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <p>有抽烟的习惯，或曾有烟龄三年以上。</p>
                </div>
            </label>
          
             <label class="weui_cell weui_check_label" for="s13">
                <div class="weui_cell_hd">
                    <input class="weui_check" name="checkbox" id="s13"  type="checkbox">
                    <i class="weui_icon_checked"></i>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <p>不喜欢户外运动，对健身也无多大热情</p>
                </div>
            </label>
          
             <label class="weui_cell weui_check_label" for="s14">
                <div class="weui_cell_hd">
                    <input class="weui_check" name="checkbox" id="s14"  type="checkbox">
                    <i class="weui_icon_checked"></i>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <p>压力大，容易受到坏情绪影响。</p>
                </div>
            </label>
          
               
        </div>        
 <!--内容结束--> 
        
         <div class="arrow"></div>
        </div>
       
    </div>
    <div class="page"  data-lock-next="true">
        <div class="title">第三页</div>
        <div class="subtitle">  <div class="weui_btn_area " >
            <a class="weui_btn weui_btn_primary"  href="javascript:void(0);" id="btn">点击进入下一页</a>
        </div> </div>
        <div class="arrow"></div>
    </div>
    <div class="page" style="-webkit-overflow-scrolling: touch;">
        <div class="title" data-animation='{"name": "slideToTop", "duration": 800, "timing-function": "ease", "fill-mode": "both"}'>第四页</div>
        <div class="subtitle">谢谢您的使用 支持动画绑定<br>
        <pre style='font-size:12px'>
        new PageSlider({
    pages: $('.page-wrap .page'),   //必需，需要切换的所有屏
    direction: 'vertical',          //可选，vertical 或 v 为上下滑动，horizontal 或 h 为左右滑动，默认为 vertical
    currentClass: 'current',        //可选, 当前屏的class (方便实现内容的进场动画)，默认值为 'current'
    gestureFollowing: 'false',      //可选，如果为 true，则开启手势跟随模式
    hasDot: 'false',                //可选，生成标识点结构，样式自己控制
    preventDefault: true,           //可选，是否阻止默认行为
    rememberLastVisited: true,      //可选，记住上一次访问结束后的索引值，可用于实现页面返回后是否回到上次访问的页面
    animationPlayOnce: false        //可选，切换页面时，动画只执行一次
    dev: false,                     //可选，开发模式，传入具体页面索引值
    oninit: function () {},         //可选，初始化完成时的回调
    onbeforechange: function () {}, //可选，开始切换前的回调
    onchange: function () {},       //可选，每一屏切换完成时的回调
    onSwipeUp: function () {},      //可选，swipeUp 回调
    onSwipeDown: function () {},    //可选，swipeDown 回调
    onSwipeLeft: function () {},    //可选，swipeLeft 回调
    onSwipeRight: function () {}    //可选，swipeRight 回调
});
prev() 上一屏 
next() 下一屏 
moveTo(n) 跳转到第 n 屏，有缓动效果 
moveTo(n, true) 直接跳到第 n 屏，没有缓动效果 
  </pre>      
        </div>
    </div>
</div>
 <script>
 var PageSlider =  new PageSlider({
        pages: $('.page-wrap .page'),
        animationPlayOnce: false,//翻页动画只执行一次
        direction: 'v',//水平h  垂直v 修改类 arrow-h
        gestureFollowing: 'true',      //可选，如果为 true，则开启手势跟随模式
        //<div class="page" data-lock-next="true" data-lock-prev="true"></div>data-lock-next： 禁止往后滑 data-lock-prev： 禁止往前滑
       /* onSwipeUp: function(){//上划回调
            if(this.index === 0){
                var page = $(this.pages).eq(0);
                page.find('.double').show();
                page.data('lock-next', false);
            }
        },
        onchange: function(){//每一屏切换完成时的回调
            if(this.prevIndex === 0){
                var page = $(this.pages).eq(0);
                page.find('.double').hide();
                page.data('lock-next', true);
            }
        },*/
    });
  $('#btn').on('tap', function(){
        PageSlider.next();
    });   
    </script>
</body>
</html>