响应式键入新闻自动收报机与链接列表

问题描述 投票:0回答:1

请看这个插件

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)

它现在可以点击,但不像以前那样正常工作

请帮忙!

javascript jquery news-ticker
1个回答
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>
© www.soinside.com 2019 - 2024. All rights reserved.