我是JavaScript新手,我发现了这个很酷的jQuery文本出发板效果http://jsfiddle.net/aino/9yyVd/
JavaScript语言
$.fn.ticker = function( options ) {
options = $.extend({
uppercase: true,
extra: ',.:+=/()',
speed: 30
}, options);
var alph = 'ABCDEFGHIJKLMNOPQRSTUVXYZ';
if ( !options.uppercase ) {
alph = alph + alph.toLowerCase();
}
alph = '01234567890'+alph + options.extra + ' ';
return this.each(function() {
var k = 1,
elems = $(this).children(),
arr = alph.split(''),
len = 0,
fill = function( a ) {
while( a.length < len ) {
a.push(' ');
}
return a;
},
texts = $.map( elems, function( elem ) {
var text = $(elem).text();
len = Math.max(len, text.length);
return options.uppercase ? text.toUpperCase() : text;
}),
target = $('<div>'),
render = function(print) {
target.data('prev', print.join(''));
fill(print);
print = $.map(print, function(p) {
return p == ' ' ? ' ' : p;
});
return target.html('<span>' + print.join('</span><span>') + '</span>');
},
attr = {}
$.each(this.attributes, function(i, item) {
target.attr( item.name, item.value );
});
$(this).replaceWith( render( texts[0].split('') ) );
target.click(function(e) {
var next = fill(texts[k].split('')),
prev = fill(target.data('prev').split('')),
print = prev;
$.each(next, function(i) {
if (next[i] == prev[i]) {
return;
}
var index = alph.indexOf( prev[i] ),
j = 0,
tid = window.setInterval(function() {
if ( next[i] != arr[index] ) {
index = index == alph.length-1 ? 0 : index + 1;
} else {
window.clearInterval(tid);
}
print[i] = alph[index];
render(print);
}, options.speed)
});
k = k == texts.length-1 ? 0 : k + 1;
});
});
};
$('#text').ticker();
HTML语言
<ul id="text">
<li>4032 London</li>
<li>5901 Paris</li>
<li>9954 Cologne</li>
<li>4204 St. Petersburg</li>
</ul>
<p>↑ Click</p>
CSS系统
# text{cursor:pointer;overflow:hidden;font:40px/1 monospace;}
# text span{display:block;float:left;background:#444;
color:#fff;margin-right:1px;}
我注意到,在单击div之后,脚本将更改为数组的下一部分,我猜这与target.click
有关。
如何更改此设置以更改onload
?
3条答案
按热度按时间9jyewag01#
当然,只要将
target.click
更改为$(document).ready
即可。我有edited the example要演示。
n3ipq98p2#
如果删除
target.click(function(e) {
,则此操作将在“加载”时工作-http://jsfiddle.net/9yyVd/138/但是,如果希望保留click()触发器,可以在加载click之后触发它。
lfapxunr3#
只需使用.ready()代替.click();)
http://api.jquery.com/ready/