我需要转换(当用户做某事时):
adcb
到(每个字母的下一个字母):
bedc
目前我正在使用 javascript并覆盖字符。
还记得 Pkmn 游戏 Angular 吗?
如果我们可以模拟 Angular 色的移动(图中,从 7 变成皮卡丘),那不是很酷吗?
PS - 我不知道如何处理这个...
最佳答案
这可以通过 CSS 动画来实现,以移动字母,在字母不可见时更新字母。
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];
}
编辑:鉴于根据您的上述评论,这是一个很好的理由,我让它变得更漂亮了!!
关于javascript - 如何使字母的赌场式增量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40792568/