Question

我正在尝试整理一个网页，其中包含在页面上随机位置弹出的文字，淡出，然后再次出现在随机位置。我发现了一些适合我目的的东西。我想要这样的东西，但是如果需要的话，我可以操作并使用文本阴影效果制作列表。

(function makeDiv(){
var divsize = ((Math.random()*100) + 50).toFixed();
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div/>').css({
    'width':divsize+'px',
    'height':divsize+'px',
    'background-color': color
});

var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

$newdiv.css({
    'position':'absolute',
    'left':posx+'px',
    'top':posy+'px',
    'display':'none'
}).appendTo( 'body' ).fadeIn(100).delay(300).fadeOut(200, function(){
   $(this).remove();
   makeDiv(); 
});

}）（）;

Fiddle

这是类似事物的第二个例子，只是它没有随机位置。

$('li').each(function(){
var randomTop = $('div').height()*Math.random(); //random top position
var randomLeft = $('div').width()*Math.random(); //random left position

$(this).css({ //apply the position each li
        top        : randomTop,
        left    : randomLeft
    });
});

Fiddle

我希望将两者拼接在一起，以便得到我理想的东西。请忘记格式化，这是我第一次在这里，我正在努力遵守标准。

Answer 1

我不确定我是否理解你正在寻找什么，但我“将它们拼接在一起。”

Fiddle

(function fadeInDiv(){
    var divs = $('.fadeIn');
    var divsize = ((Math.random()*100) + 50).toFixed();
    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
    var maxSize = 30;
    var minSize = 8;
    var size = (Math.random()*maxSize+minSize)

    var elem = divs.eq(Math.floor(Math.random()*divs.length));

    if (!elem.is(':visible')){
        elem.fadeIn(Math.floor(Math.random()*1000),fadeInDiv);
        elem.css({
            'position':'absolute',
            'left':posx+'px',
            'top':posy+'px',
            'font-size': size+'px'
        });
    } else {
        elem.fadeOut(Math.floor(Math.random()*1000),fadeInDiv); 
    }
})();

编辑：更新了小提琴网址

随机位置的文本Fadein / Fadeout

1 个答案: