0

如何滑出和滑入文本以替换句子中的一个单词？

这是句子：

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

我需要将单词<span>向上滑动并从底部滑动一个新单词。

目标是让一组单词每n秒轮换一次。例如，给定以下数组：

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

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

我希望最终结果有点类似于里程表的行为方式，但带有文本。有道理？

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

4

2 回答 2

2

在不为您编写代码的情况下，我为您整理了一个简短的文本切换示例。我曾经提供过动画，但如果您想要更好的控制并使其更加 odometre'ish，.slideUp()您可能想要使用它。.animate()我希望这能让您对如何实现这一目标有所了解。

jSFiddle 示例

粗略的 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

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

.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);
于 2012-11-30T22:00:25.087 回答
0

我想你可以试试

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

myArr.push(myArr.shift());
  • myArr.shift() 给你“ipsum”
  • myArr.push() 把它放在最后。

编辑：

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

在 html 中使用它：

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

将此用于带有 jquery 的 javascript ：

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/

于 2012-11-30T21:13:10.087 回答