Question

我想用jQuery一次一个地显示一个字符。有插件可以做到这一点或者我怎么能得到这种效果？

Answer 1

您可以编写一个小插件来执行此操作。这是让你开始的东西（远非完美，只是为了给你一个想法！）：

(function($) {
    $.fn.writeText = function(content) {
        var contentArray = content.split(""),
            current = 0,
            elem = this;
        setInterval(function() {
            if(current < contentArray.length) {
                elem.text(elem.text() + contentArray[current++]);
            }
        }, 100);
    };

})(jQuery);

您可以这样称呼：

$("#element").writeText("This is some text");

这是working example。

Answer 2

查看TickerType插件：http://www.hungry-media.com/code/jQuery/tickerType/

Answer 3

您引用的网站^*使用jQuery Ticker，可以在http://www.jquerynewsticker.com/

在线找到

实施起来也相对简单：

<div id="ticker-wrapper" class="no-js">
    <ul id="js-news" class="js-hidden">
        <li class="news-item"><a href="#">This is the 1st latest news item.</a></li>
        <li class="news-item"><a href="#">This is the 2nd latest news item.</a></li>
        <li class="news-item"><a href="#">This is the 3rd latest news item.</a></li>
        <li class="news-item"><a href="#">This is the 4th latest news item.</a></li>
    </ul>
</div>

使用以下jQuery / JavaScript：

<script type="text/javascript">
    $(function () {
        $('#js-news').ticker();
    });
</script>

有关更多选项和配置详细信息，请参阅插件文档。

^{*由于其内容}

，参考网站可能未在OP中列出

Answer 4

var chars = $("#target").html().split(/./);
var content = "";
$.each(chars, function(index, value) { 
  content += "<span style='display:none'>"+value+"</span>"; 
});

$("#target").html(content);
$("#target span").each(function(){
  $(this).show();
});

Answer 5

这会将字符串转换为数组，并一次将其写出字符。

var str = "This is a sentence".split('');

for (var i=0; i < str.length; i++) {
    console.log(str[i]);
};

http://jsfiddle.net/44xEe/1/

Answer 6

我最近创建了一个整洁的小js库，没有依赖关系来解决这个问题。查看Sequencr.js

var stringToPrint = "Hello World!"
Sequencr.for(0, stringToPrint.length, function(i) {
  document.getElementById("output").innerHTML += stringToPrint[i];
}, 200, null);

<!--This is sequencr lib. For demonstration purposes only (don't copy this) - download the latest version from https://github.com/JSideris/Sequencr.js -->
<script type="text/javascript">
function Sequencr(){this.chain=function(n,c){Sequencr["for"].apply(this,[0,n.length,function(c){n[c].call(this)},c])},this["for"]=function(n,c,e,t,i){c>n?setTimeout(function(u){e.call(u,n),Sequencr["for"].apply(u,[n+1,c,e,t,i])},t,this):i&&i.call(this)}}var Sequencr=new Sequencr;
</script>



<div id="output"></div>

显示一个句子，一次一个字符

6 个答案: