Question

如何将文字滑出来以替换句子中的一个单词？

这是句子：

<p>Lorem <span>ipsum</span> dolor sit.</p>

我需要在<span>内滑动单词并从底部滑入一个新单词。

目标是拥有一个在每个 n 秒内旋转的单词数组。例如，给定以下数组：

var myArr = new Array('ipsum','alpha','beta','gamma','delta','epsilon');

如何用数组中的下一个替换（通过.slideUp()，我希望）现有的单词？

我期待最终结果有点类似于里程表的行为方式，但有文字。有意义吗？

你能指出我正确的方向吗？

Answer 1

如果没有为您编写代码，我会为您准备一个简短的文本切换示例。我已经使用.slideUp()来提供动画，但是如果你想要更精细的控制并且使它更像odometre'ish，你可能想要使用.animate()。我希望这可以让你了解如何实现这一目标。

jSFiddle Example

粗糙的HTML

<div class="widget-container">
    <p>Lorem</p>
    <div class="widget-vert-rotate">
        <!-- jQuery elements will be here -->
    </div>
    <p>dolor sit amet.</p>
</div>

CSS

把它们排成一行。垂直对齐顶部是为了确保动画始终将下一个单词与sentance内联。一些正确的填充也可以模拟字间距。最后为rotator容器设置一个高度，并将其溢出设置为隐藏。

.widget-container > * {
    display: inline-block;
    vertical-align: top;
    padding-right: 0.4em;
}

.widget-vert-rotate {
    overflow: hidden;
    height: 1.1em;
}

和JS + jQuery

var words = ['ipsum','nunc','telum'],
    i = 0,
    l = words.length,
    el = $('.widget-vert-rotate'),
    t = 3000;

// Create the text elements
for ( ; i < l ; i++ ) {
    $('<p />').text(words[i]).appendTo(el);
}

// Set the interval function
var itv = setInterval(function() {
    var child = el.children().first();
    child.slideUp(1000, function() {
        child.remove();

        el.append(
            $('<p />').text(child.text())
        );
    });
}, t);

Answer 2

我想你可能会尝试

var myArr = new Array('ipsum','alpha','beta','gamma','delta','epsilon');

myArr.push(myArr.shift());

myArr.shift（）为您提供“ipsum”
myArr.push（）将它放在最后。

修改：

Ok Ryan，这是一个解决方案，您可以使用更好的动画，但这是为了示例。我首先使用pop（）错了，因为你需要在这里移位（）！（也编辑）

在html中使用它：

        <span id="mySpan">plop</span>

将此用于javascript与jquery：

var myArr = new Array('ipsum ','alpha ','beta ','gamma ','delta ','epsilon ');
    loop();

    function loop() 
    {
        $("#mySpan").slideUp(3000, function(){
            myArr.push(myArr.shift());

            $("#mySpan").empty();
            $("#mySpan").append(myArr[0]);
            $("#mySpan").show(200);

            loop();
        });
    }

JSFiddle：http://jsfiddle.net/eL3eG/

如何每隔n秒将一个新字符串从一个数组滑入一个句子？

2 个答案: