最近,我正尝试通过更改文本来更改正方形图案,就像 www.tffchallenge.com 中那样,但我无法找到一种方法来做同样的事情。我只能使用 css 制作背景,但没有任何效果。
到目前为止,这是我的代码:
样式:
div {
background: url("http://i.imgur.com/YE8pcYR.jpg") fixed;
opacity: 0.1;
height: 6vw;
width: 6vw;
display:inline-block;
padding:0;
margin:0;
}
body {
background: #222;
line-height:0;
overflow:hidden;
padding:0;
margin:0;
}
javascript:
var fadeintime = 400;
var fadeouttime = 2000;
$(document).ready(function(){
setInterval(anim, 50);
});
function anim(){
var rand = Math.floor((Math.random()*$("body").children("div").length));
var el = $("body").children("div")[rand];
$(el).animate({opacity: "0.7"}, fadeintime);
$(el).animate({opacity: "0.1"}, fadeouttime);
}
而 html 是:
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div>...
我已经创建了不断变化的方形图案,但我无法在其上创建不断变化的文本,你能告诉我怎么做吗。
最佳答案
这里是开始的地方 - FIDDLE .
我还没有弄清楚字母放置的问题 - 我会继续玩,直到我得到答案。您可以根据需要扩展数组中的字母数。
JS
var fadeintime = 400;
var fadeouttime = 2000;
setInterval(anim, 100);
var letterarray = new Array('A','B','C','D','E','F','G','H','I','J');
function anim(){
var rand = Math.floor((Math.random()*$("body").children("div").length));
var randletter = Math.floor(Math.random() * letterarray.length);
var el = $("body").children("div")[rand];
$(el).animate({opacity: "0.7"}, fadeintime);
$(el).animate({opacity: "0.1"}, fadeouttime);
$(el).html( letterarray[randletter] );
}
关于jquery - 使用 css 更改文本来更改方形图案?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23173177/