1

首先，我制作了一个CODEPEN或jsfiddles

背景：

好的，我span在几个标题标签中有一个标签h1,h2,h3。在那个spantag里面是这个词

经验 是这样倒着写的：

<h3>for <span class="hover-spell">ecneirepxe</span>.</h3>

问题

我不确定最好的方法来解决这个问题，但我想悬停：

  • 重新排序以正确拼写经验
  • 如果可能的话，在重新排序时让它们重叠在一起

我不知道如何做到这一点，但我一直在思考正则表达式和数组，但这感觉过于复杂，我真的对正则表达式和正确的数组排序一无所知。任何能引导我走向正确方向的信息将不胜感激。或者对codepen或jsfiddles的编辑会非常棒。

4

3 回答 3

3

一种可能的解决方案是使用 css 来完成此操作。此解决方案不会为过渡设置动画，它只是更改字母的顺序。将此添加到您的CSS：

.hover-spell:hover{
    direction: rtl; 
    unicode-bidi: bidi-override;
}

编辑：感谢 Marcel Gwerder 指出不可能为方向属性设置动画

我在另一篇文章中找到了这个答案（它遍历给定的文本字符串并将每个字符包装在一个跨度中，然后为每个字符分配过渡样式），这可能有助于 jquery 解决方案。

于 2013-08-05T20:28:42.350 回答
1

我刚刚尝试用 jquery 设置一些动画，获得一个漂亮的动画有点棘手。但是那个看起来还不错（DEMO）。

var expElem = $(".hover-spell");
var exp = expElem.text();
var run = false;

expElem.empty();
for(var i = 0; i <= exp.length; i++) {
   expElem.append('<span>'+exp.charAt(i)+'</span>'); 
}

expElem.mouseover(function() {   
    if(run === true) return false;
    run = true;
    var stepDuration = 300;
    var counter = 0;

    (function anim(){
        if(counter == exp.length -1) return false; //Remove -1 to get last "e" animated
         counter++;

        var nth = exp.length;
        var elem = $('span:nth-child('+nth+')', expElem); 

        elem.slideUp(stepDuration, function() {
            (function() {
                if(counter == 1) return elem.prependTo(expElem);
                else return elem.insertAfter($('span:nth-child('+(counter-1)+')', expElem));
            })().slideDown(stepDuration, anim);
        });
    })();   
});

让它与悬停（包括鼠标离开）一起工作有点复杂。您也可以尝试存储位置，然后将它们相互滑动，但又有点复杂。

于 2013-08-05T22:20:17.270 回答
0 
<span id = "spell">olleh</span>   //hello in reverse

<script type="text/javascript">
        var newText;
        var text = null;
        text = document.getElementById("spell").innerHTML;
        for (var i = text.length - 1; i >= 0; i--) {




            if (i == text.length - 1) {
                newText = text.substr(i, 1);
            }
            else {
                newText = newText + text.substr(i, 1);
            }
         }
        alert(newText);
    </script>

在body标签中写这个脚本......

于 2013-08-05T21:48:28.270 回答