Question

有人知道是否有一个jquery插件可以执行类似于此效果的操作吗？ http://tympanus.net/Tutorials/CSS3RotatingWords/index5.html

我喜欢这个效果，但我需要它兼容到IE7，或者至少，只显示IE9 / 8/7中旋转单词的文本

Answer 1

在jQuery

之后将其添加到页面（可能在单独的js文件中）

(function($){
    $.fn.rotate = function(params){
        return this.each(function(index, el){
            var defaults = {
                text : [],
                interval : 2000
            };

            var options = $.extend({}, defaults, params);
            var i = 0;

            if(options.text.length){
                setInterval(function(){
                    i = i < options.text.length -1 ? ++i : 0;
                    $(el).fadeOut(function(){ 
                        $(this).text(options.text[i]).fadeIn();
                    });
                }, options.interval);
            }
        });
    };
})(jQuery);

要使用它，只需执行

$(selector).rotate({ 
    text: ['text1', 'text2'] // an array of strings
    interval: 2000 // Optional. number in milliseconds, I've put default as two seconds  
});

看看小提琴：http://jsfiddle.net/U9ZTa/1/

您可以根据自己的需要进行更改。褪色效果应适用于所有浏览器IE6 +。

如果你想要在现代浏览器中添加css动画......

Answer 2

这可能会有所帮助 - jQuery简单文本旋转器：http://www.thepetedesign.com/demos/jquery_super_simple_text_rotator_demo.html

您可能需要对其进行调整才能对您提供的链接产生相同的效果。

jquery旋转文本动画（重新创建css3效果）

2 个答案: