带有链接列表的响应式打字新闻行情
responsive typing news ticker with list of links
请看这个插件
它工作正常,但它只显示文本而不显示链接
我有如下列表
<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)
它现在可以点击,但不能像以前那样正常工作
请帮忙!
由于您尝试做的是定制的,我建议您编写自己的代码,而不是尝试修改 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>
请看这个插件
它工作正常,但它只显示文本而不显示链接 我有如下列表
<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)
它现在可以点击,但不能像以前那样正常工作
请帮忙!
由于您尝试做的是定制的,我建议您编写自己的代码,而不是尝试修改 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>