卡片形式(swipeable cards)的界面:swing

jopen 10年前

一个卡片形式(swipeable cards)的界面,用左右滑动来判断是否输入。就像在 JellyTinder等App中看到效果。
card-stack.gif

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.');  });

项目主页:http://www.open-open.com/lib/view/home/1414738287340