CSS

Question

根据主要内容div我正在尝试随机创建背景浮动气泡这是我的一段代码

CSS

parent {

    left: 0;
    top: 0;
    width: 400px;
    height: 100%;
}

.message {
    height: 120px;
    width: 120px;
    background-color: orange;
    color: white;
    z-index: -9999;
    line-height: 115px;
    text-align: center;
    font-family: Arial, sans-serif;
    font-weight: bold;

    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
}

HTML

<div id="parent">
    <div class="message">Hello world</div>
</div>

JS

jQuery.fn.verticalMarquee = function(vertSpeed, horiSpeed) {
    this.css('float', 'left');

    vertSpeed = vertSpeed || 1;
    horiSpeed = 1/horiSpeed || 1;

    var windowH = this.parent().height(),
        thisH = this.height(),
        parentW = (this.parent().width() - this.width()) / 2,
        rand = Math.random() * 1000,
        current = this;

    this.css('margin-top', windowH + thisH);
    this.parent().css('overflow', 'hidden');

    setInterval(function() {
        current.css({
            marginTop: function(n, v) {
                return parseFloat(v) - vertSpeed;
            },
            marginLeft: function(n, v) {
                return (Math.sin(new Date().getTime() / (horiSpeed * 1000) + rand) + 1) * parentW;
            }
        });
    }, 15);

    setInterval(function() {
        if (parseFloat(current.css('margin-top')) < -thisH) {
            current.css('margin-top', windowH + thisH);
        }
    }, 250);
};

$('.message').verticalMarquee(1, 1);

所以一切都很好用1个元素随机浮动

但是当我将相同的功能附加到许多（.message）元素时，我想让它们随机漂浮在背景中，所以也有开始和结束随机点。

有人可以帮帮我吗？

Answer 1

不知道你的意思究竟是什么，但是如果你需要知道如何让这个函数适用于所有.message-div你就是这样：

$(document).ready( function( ) {
    $('.message').verticalMarquee( 1, 1 );
} );

Answer 2

如果您添加以下内容

var message = 1;
$('.message').each(function(message) { 
    $(this).verticalMarquee(1, 1, message);
    message++
});

还添加一个参数

jQuery.fn.verticalMarquee = function(vertSpeed, horiSpeed, index)

和index的多个1000每次获得不同的兰特

rand = Math.random() * (index * 1000)

结果如下：http://jsfiddle.net/exr4N/1/

我不知道这是否是你需要的，但我想我给了你一个主意。祝你好运

随机背景气泡

CSS

HTML

JS

2 个答案: