带有链接列表的自适应键入新闻行情

时间:2018-09-26 11:20:59

标签: javascript jquery news-ticker

请参阅此插件

inewsticker

它工作正常,但仅显示文本,不显示链接 我有一个类似下面的列表

<ul class="typing">
<li><a href="http://test1.com">this is news 1</a></li>
<li><a href="http://test2.com">this is news 2</a></li>
<li><a href="http://test3.com">this is news 3</a></li>
</ul>

我想显示具有打字效果的链接,但只显示文本(不显示链接)

这是插件的代码

if (t.effect == "typing") {
            var s = 0;
            var o = 0;
            var u = t.delay_after / t.speed;
            var a = (new Array(1 + u)).join(" ");
            var f = new Array;
            i.each(function() {
                f.push(e(this).text() + a)
            });
            count = f.length;
            setInterval(function() {
                result = f[o].substring(0, s);
                e(r).html(result);
                s++;
                if (s == f[o].length) {
                    s = 0;
                    r.appendTo(r).hide().fadeIn("slow");
                    o++;
                    if (count == o) {
                        o = 0
                    }
                }
            }, t.speed)
        }
    }
})(jQuery)

我尝试更改此内容

f.push(e(this).text() + a)

对此

f.push(e(this).html() + a)

它现在可以单击,但不能像以前一样正常工作

请帮助!

1 个答案:

答案 0 :(得分:0)

由于您要做的是量身定制,我建议您编写自己的代码,而不要尝试修改inewsticker来完成不打算使用的事情。

这是我的工作尝试和答案:

$(function() {
    $.fn.typeLinks = function() {
        var typeSpeed = 50,
            delay = 2000,
            $this = $(this),
            $children = $this.children(),
            texts = $children.map(function() {
                return $(this).text();
            }).get();
        var i = 0,
            s = 0;
        var step = function() {
            var $current = $children.eq(i),
                $a = $current.find('a:first');
            $children.hide();
            $current.show();
            $a.text(texts[i].substr(0, s));
            if (s == texts[i].length) {
                s = 0;
                if (i == $children.length - 1) {
                    i = 0;
                }else{
                    i++;
                }
                setTimeout(step, delay);
            } else {
                setTimeout(step, typeSpeed);
            }
            s++;
        };
        step();
    };
    $('.typing').typeLinks();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="typing">
<li><a href="http://test1.com">this is news 1</a></li>
<li><a href="http://test2.com">this is news 2</a></li>
<li><a href="http://test3.com">this is news 3</a></li>
</ul>