引导页

学无止境✅  2016-3-16
0


本人新手一个,正在学习AppCan!
学习期间想实现app引导页的功能,就在社区查阅了一下相关的帖子。发现都是使用了一些相管的组件,解决方案也存在这一些问题。
所以自己写了一种实现方法,很容易学习使用,当然有不足之处。比如:不支持引导页的动画交互,没有切换动画。。。
下面把源码贴出来,大家看看(菜鸟拙作,大神勿喷):
<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="css/fonts/font-awesome.min.css">
        <link rel="stylesheet" href="css/ui-box.css">
        <link rel="stylesheet" href="css/ui-base.css">
        <link rel="stylesheet" href="css/ui-color.css">
        <link rel="stylesheet" href="css/appcan.icon.css">
        <link rel="stylesheet" href="css/appcan.control.css">
        <link rel="stylesheet" href="home/css/main.css">
        <style>
            .bg-size{
                -webkit-background-size: 100%;
            }
            .index1{
                background-image: url('images/1_1.jpg');
            }
            .index2{
                background-image: url('images/1_2.jpg');
            }
            .index3{
                background-image: url('images/1_3.jpg');
            }
        </style>
    </head>
        <body class="um-vp bc-bg" ontouchstart>
            <div id="page_0" class="up ub ub-ver" tabindex="0">
                <div class="up ub ub-ver ub-img bg-size" id="center">
                    <div class="ub ub-f4"></div>
                    <div class="ub ub-f4"></div>
                    <div class="ub ub-f1 ub-pc ub-ae uhide" id="begin_btn">
                        <div class="btn ub uc-a ub-ac bc-text-head ub-pc bc-btn" id="btn">进入应用>></div>
                    </div>
                    <div class="ub ub-f1 ub-pc ub-ae bc-text-head">
                        <div class="ub ub-f1 ub-pe" id="index1">●</div>
                        <div class="ub ub-f1 ub-pc" id="index2">●</div>
                        <div class="ub ub-f1" id="index3" >●</div>
                    </div>
                </div>
            </div>
            <script src="js/appcan.js"></script>
        <script src="js/appcan.control.js"></script>
        <script src="js/appcan.slider.js"></script>
        <script>
          var index = 0;
          appcan.ready(function(){
              $("#index1").addClass("sc-text-active");
              $("#center").addClass("index1");
              index = 1;
              uexWindow.setSwipeRate(100);
              uexWindow.onSwipeRight = function(){
                if(index==3){
                    $("#begin_btn").addClass("uhide");
                }
                if(index==2){
                    $("#center").removeClass("index2");
                    $("#index2").removeClass("sc-text-active");
                    $("#index1").addClass("sc-text-active")
                    $("#center").addClass("index1");
                    index =1;
                }else if(index==3){
                    $("#center").removeClass("index3");
                    $("#index3").removeClass("sc-text-active");
                    $("#index2").addClass("sc-text-active")
                    $("#center").addClass("index2");
                    index=2;
                }
              }
              uexWindow.onSwipeLeft = function(){
                if(index==1){
                    $("#center").removeClass("index1");
                    $("#index1").removeClass("sc-text-active");
                    $("#index2").addClass("sc-text-active")
                    $("#center").addClass("index2");
                    index=2;
                }else if(index==2){
                    $("#center").removeClass("index2");
                    $("#index2").removeClass("sc-text-active");
                    $("#index3").addClass("sc-text-active")
                    $("#center").addClass("index3");
                    index=3;
                }
                if(index==3){
                    $("#begin_btn").removeClass("uhide");
                }
              }
          })
          appcan.button(".btn", "btn-act", function() {
              alert('进入应用');
          })
</script>
        </body>
</html>

游客  现在