根据主要内容 div,我正在尝试随机创建背景 float 气泡 这是我的一段代码
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 个元素随机 float 时一切都很好
但是当我将相同的功能附加到许多 (.message) 元素时, 我想让它们随机漂浮在背景中,因此也有一个开始和结束随机点。
有人可以帮助我吗?
最佳答案
不知道您的确切意思,但如果您需要知道如何让此函数在所有 .message-divs 上工作,您可以这样做:
$(document).ready( function( ) {
$('.message').verticalMarquee( 1, 1 );
} );
关于javascript - 随机背景气泡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6187649/