前端_仿app欢迎界面_度假村

最新推荐文章于 2024-06-25 13:23:18 发布

原创最新推荐文章于 2024-06-25 13:23:18 发布 · 830 阅读

CC 4.0 BY-SA版权

这篇博客主要介绍了如何使用HTML、CSS和JavaScript来创建一个仿App的度假村欢迎界面。内容包括了index.html的结构设定，tour文件夹内的资源组织，以及index.js和style.css文件中实现交互效果和页面样式的代码详情。

index.html文件里：

-----------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Title</title>

    <link rel="stylesheet" href="../../lib/css/ionic.css">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>

    <script src="../../lib/js/ionic.bundle.min.js"></script>


    <script src="js/index.js"></script>
    <script src="pages/tour/tour.js"></script>
</head>
<body ng-app="myapp">
<ion-nav-bar class="bar-assertive"></ion-nav-bar>
<ion-nav-view animation="slide-left-right">
    <!-- 中间内容 -->
</ion-nav-view>
</body>
</html>

----------------------分割线 -------------------------------------

tour.文件

/**
 * Created by acer on 2017/10/19.
 */
angular.module("myapp").controller("tourCtrl",function($scope, $ionicSlideBoxDelegate){
    $scope.show=false;
    $scope.slideHasChanged=function(index){
        console.log(index);
        console.log($ionicSlideBoxDelegate.count());
        if(index==$ionicSlideBoxDelegate.count()-1){
            $scope.show=true;
        }else{
            $scope.show=false;
        }
    }
});

--------------------分割线 -------------------------

<ion-view title="欢迎光临度假村">
    <ion-nav-buttons side="right">
        <button class="button" ng-if="show">
            进入
        </button>
    </ion-nav-buttons>
    <ion-content>
        <ion-slide-box on-slide-changed="slideHasChanged(index)">
            <ion-slide>
                <div class="box blue"><i class="icon ion-fork"></i></div>
            </ion-slide>
            <ion-slide>
                <div class="box yellow"><i class="icon ion-document-text"></i></div>
            </ion-slide>
            <ion-slide>
                <div class="box pink"><i class="icon ion-gear-a"></i></div>
            </ion-slide>
        </ion-slide-box>
    </ion-content>
</ion-view>

--------------------分割线 -------------------------

index.js

var myapp = angular.module("myapp", ["ionic"]);
myapp.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('tour', {
            url: '/tour',
            templateUrl: 'pages/tour/tour.html',
            controller: "tourCtrl"
        });
    $urlRouterProvider.otherwise("/tour");
});

--------------------分割线 -------------------------

style.css文件：

.slider,.scroll{
    height: 100%;
}
.box{
    color: red;
    text-align: center;
    font-size: 200px;
    line-height: 450px;
}