卡片形式(swipeable cards)的界面:swing
一个卡片形式(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.'); });
本文由用户 jopen 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!