卡片形式(swipeable cards)的界面：swing
jopen
9年前
一个卡片形式(swipeable cards)的界面，用左右滑动来判断是否输入。就像在 Jelly 和 Tinder等App中看到效果。
var stack, cards; // Prepare the cards in the stack for iteration. cards = [].slice.call(document.querySelectorAll('ul li')) // An instance of the Stack is used to attach event listeners. stack = Swing.Stack(); cards.forEach(function (targetElement) { // Add card element to the Stack. stack.createCard(targetElement); }); // Add event listener for when a card is thrown out of the stack. stack.on('throwout', function (e) { // e.target Reference to the element that has been thrown out of the stack. // e.throwDirection Direction in which the element has been thrown (Card.DIRECTION_LEFT, Card.DIRECTION_RIGHT). console.log('Card has been thrown out of the stack.'); console.log('Throw direction: ' + (e.throwDirection == Card.DIRECTION_LEFT ? 'left' : 'right')); }); // Add event listener for when a card is thrown in the stack, including the spring back into place effect. stack.on('throwin', function (e) { console.log('Card has snapped back to the stack.'); });