这是我目前拥有的http://jsfiddle.net/6GEfr/ http://jsfiddle.net/6GEfr/
这可行,但我希望它像波浪一样。它应该看起来像真正的波浪,而不是“V”形。你如何逐渐做到这一点?
var height = 0;
setInterval(function () {
$('#container').prepend('<div style="height:' + Math.abs(height++) + '%"></div>');
height = (height == 100) ? -100 : height;
}, 10);
my css:
html, body, #outerContainer, #container {
height:100%;
}
#outerContainer {
display : table;
}
#container {
display : table-cell;
vertical-align:bottom;
white-space:nowrap;
}
#container > div {
width:5px;
background:black;
display:inline-block;
}
只需使用Math.sin() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin来模拟波浪。
更新的示例 http://jsfiddle.net/TjaBz/
var i = 5, height = 0;
setInterval(function () {
$('#container').prepend('<div style="height:' + height + '%"></div>');
i += 0.05;
height = 50 * Math.sin(i) + 50;
}, 10);
如果想让波浪更平滑,请减小增量值和元素的宽度。这是一个example http://jsfiddle.net/asWW8/.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)