用Javascript旋转文字

我想循环查看一组创建文字旋转效果的单词。 我大部分工作如预期。 有什么办法可以在p元素的长度上使用css转换吗？

当从char.length> 10的对象遍历到char.length <5的对象时（例如），运动不平滑，我想缓解文本在单词周围的移动，而不是突然向后跳跃（或转发取决于单词的长度）

HTML：

<p><span id="description-rotate"></span> something built on something else.</p>

上海社会科学院：

@-webkit-keyframes rotate-text

    0%
        opacity: 0

    30%
        opacity: 1

    50%
        opacity: 1

    70%
        opacity: 1


    100%
        opacity: 0

p
    font-family: 'Helvetica', sans-serif

.rotate-text
   -webkit-animation: rotate-text 3050ms cubic-bezier(0.645,  0.045, 0.355, 1.000) infinite
    -moz-animation: rotate-text 3050ms cubic-bezier(0.645,  0.045, 0.355, 1.000) infinite
    -o-animation: rotate-text 3050ms cubic-bezier(0.645,  0.045, 0.355, 1.000) infinite
    animation: rotate-text 3050ms cubic-bezier(0.645,  0.045, 0.355, 1.000) infinite

使用Javascript：

var descriptionArray = ['some text', 'some more text', 'some even longer text'];
var descriptionLength = descriptionArray.length;
var description = $('#description-rotate');

function loop(i) {
     description.text(descriptionArray[i%descriptionLength]);
     setTimeout(function() {
        loop(i+1);
        description.addClass('rotate-text');
    }, 3050); // This duration must match the length of the animation
}

loop(0);

我意识到这可能是解释我的目标的糟糕方式，请查看CodePen以更好地了解我想要创建的内容。

谢谢！

请参阅：http://codepen.io/anon/pen/JueGx

---

你不需要CSS3 。
仍然在2014年缺乏支持，并由于-vendor-specific于-vendor-specific前缀使我们的生活相当艰难。
一切你需要的：

http://jsbin.com/rotating-text-with-javascript/

var arr = ['1 some text', '2 some more text', '3 some even longer text'],
    i = 0, // Start Index
    len = arr.length,
    $el = $('#description-rotate'),
    $temp = $('<span />'); // Helper - Will measure Text width

$temp.hide().appendTo( $el.parent() ); // Setup Helper

(function loop() {
  var w = $temp.text( arr[i%=len] ).width(); // set text + get width
  $el.fadeTo(600,0).animate({width: w}, 300, function(){
    $(this).text( arr[i++] ).fadeTo(600, 1);
  });
  setTimeout(loop, 3000);
}());

只是这个CSS：

#description-rotate{ // The span holding the text
   vertical-align: top;
}

对于另一个类似的方法，请参阅这个SO。 回答

---

如何jQuery的animate()函数？ http://api.jquery.com/animate/

您可以触发数组中每个单词的动画。 这是一个想法，你将不得不弄清楚如何填充变量hasMoreWordsInTheArray和nextWordInTheArray ：

function animateParagraphTag(word) {
    if(hasMoreWordsInTheArray) {
        //some special code to calculate the best width based on the word's length (theNewWidthValue)
        $('p').animate(
            { width: theNewWidthValue },
            "fast",
            animateParagraphTag(nextWordInTheArray)
        );
    }
}

您必须根据单词的长度计算宽度，并将其放置在动画参数中，然后，一旦p标签相应地完成展开/收缩，它将触发回调函数，然后您可以继续数组的下一个元素（单词）。

链接地址: http://www.djcxy.com/p/79269.html

上一篇: Rotating text with Javascript

下一篇: Segfault when testing the intersection with geos in parallel