AugularJS Tinder（火种）应用的人物卡片

Ionic Starter App。可以通过左右拖拉（移动设备上的Swipe）动作来切换人物照片。

card

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2243
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// Ionic Starter App, v0.9.20

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'ionic.contrib.ui.tinderCards'])

.config(function($stateProvider, $urlRouterProvider) {

})

.directive('noScroll', function($document) {

return {
        restrict: 'A',
        link: function($scope, $element, $attr) {

$document.on('touchmove', function(e) {
                e.preventDefault();
            });
        }
    }
})

.controller('CardsCtrl', function($scope, TDCardDelegate) {
    console.log('CARDS CTRL');
    var cardTypes = [{
        image: 'https://pbs.twimg.com/profile_images/479740132258361344/KaYdH9hE.jpeg'
    }, {
        image: 'https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png'
    }, {
        image: 'https://pbs.twimg.com/profile_images/491995398135767040/ie2Z_V6e.jpeg'
    }, ];

$scope.cards = Array.prototype.slice.call(cardTypes, 0);

$scope.cardDestroyed = function(index) {
        $scope.cards.splice(index, 1);
    };

$scope.addCard = function() {
        var newCard = cardTypes[Math.floor(Math.random() * cardTypes.length)];
        newCard.id = Math.random();
        $scope.cards.push(angular.extend({}, newCard));
    }
})

.controller('CardCtrl', function($scope, TDCardDelegate) {
    $scope.cardSwipedLeft = function(index) {
        console.log('LEFT SWIPE');
        $scope.addCard();
    };
    $scope.cardSwipedRight = function(index) {
        console.log('RIGHT SWIPE');
        $scope.addCard();
    };
});

编译

CSS

td-cards {
    display: block;
}
td-card {
    position: absolute;
    left: 50%;
    margin-top: 80px;
    margin-bottom: 40px;
    margin-left: -125px;
    width: 250px;
    height: 200px;
    /*
td-card.card-0 {
  -webkit-transform: translate3d(0, 0px, 0);
  transform: translate3d(0, 0px, 0);
  top: 0px;
  z-index: 10;
}
td-card.card-1 {
  -webkit-transform: translate3d(0, 4px, 0);
  transform: translate3d(0, 4px, 0);
  z-index: 9;
}
td-card.card-2 {
  -webkit-transform: translate3d(0, 8px, 0);
  transform: translate3d(0, 8px, 0);
  z-index: 8;
}
*/
    
    border: 1px solid #999;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}
td-card .image {
    position: relative;
}
td-card img {
    max-width: 100%;
    border-radius: 6px;
}
.yes-text {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 30px;
    color: #6ffa6f;
    opacity: 0;
}
.no-text {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    color: #ff7373;
    opacity: 0;
}
.fade {
    -webkit-transition: 0.2s opacity linear;
    transition: 0.2s opacity linear;
    opacity: 0;
}

HTML

<html>

<title>Ionic Swipe Down</title>

<body ng-app="starter" no-scroll>
    <ion-pane ng-controller="CardsCtrl">
        <ion-header-bar class="bar-default">
            <h1 class="title">TD Cards</h1>
        </ion-header-bar>

<td-cards>
            <td-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-swipe-left="cardSwipedLeft($index)" on-swipe-right="cardSwipedRight($index)" on-partial-swipe="cardPartialSwipe(amt)" class="card-{{card.index}}" ng-controller="CardCtrl">
                <div class="image">
                    <div class="yes-text" ng-style="leftTextOpacity">LIKE</div>
                    <img ng-src="{{card.image}}">
                    <div class="no-text" ng-style="rightTextOpacity">NOPE</div>
                </div>
            </td-card>
        </td-cards>
    </ion-pane>
</body>

</html>

Ionic Starter App。可以通过左右拖拉（移动设备上的Swipe）动作来切换人物照片。

card

编辑器支持Emmet

快捷键

Ionic Starter App。可以通过左右拖拉（移动设备上的Swipe）动作来切换人物照片。

card

使用ReactJS实现仿Instagram骨架图卡片

HTML5一款带Slider功能的动画卡片模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：