如何使赌场般的增加一个字母？

Question

我需要转换（当用户做某事时）：

adcb

到（每个字母的下一个字母）：

bedc

目前我正在使用javascript并覆盖该角色。

还记得Pkmn Game Corner吗？

如果我们可以模拟角色的运动（在图片中，从7变为皮卡丘），这不是很酷吗？

PS - 我不知道如何处理这个......

Answer 1

这可以通过CSS动画来实现移动字母，当字母不可见时更新字母。

jsfiddle

HTML：

<div id="reels">
  <div>A</div>
  <div>L</div>
  <div>E</div>
  <div>X</div>
</div>
<button id="slide">Slide</button>

CSS：

#reels > div {
  width: 20px;
  height:30px;
  overflow:hidden;
  padding:3px;
  display:inline-block;
}

#reels > div.reel-change {
  animation: slideReel 1s 1;
}

@keyframes slideReel {
  0% {
      transform: translateY(0);
  }
  49% {
      transform: translateY(-30px);
  }
  50% {
      transform: translateY(30px);
  }
  100 % {
      transform: translateY(0px);
  }
}

#reels {
  margin-bottom:10px;
}

JavaScript的：

$(function() {
    $('#slide').click(function() {
    var delay = 0;
    $('#reels').children().each(function() {
        var reel = this;
        setTimeout(function() {
        $(reel).toggleClass("reel-change");
      }, delay);
      setTimeout(function() {
        changeLetter(reel);
      }, delay + 500);
      setTimeout(function() {
        $(reel).toggleClass("reel-change");
      }, delay + 1000);
      delay += 500;
    });
  });
});

function changeLetter(el) {
      el.innerHTML = incrementChar(el.innerHTML);
}

var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
function incrementChar(c) {
    var index = alphabet.indexOf(c);
    return alphabet[index + 1] || alphabet[0];
}

编辑：根据您的上述评论看到它是一个很好的理由，我让它更漂亮!!

https://jsfiddle.net/bigalreturns/ctuujz3j/2/

Answer 2

为了记录，这是你可以做的......

var strMsg = 'abcdef';
var tmpStr = '';

function nextLetter(letter) {
    var charCode = letter.charCodeAt(0);
    return String.fromCharCode((charCode - 96) % 26 + 97)
}

for(var i=0; i < strMsg.length; i++) {
  tmpStr += nextLetter(strMsg[i]);
}

console.log(tmpStr); // bcdefg