使用Javascript以编程方式掀起波澜 [英] Programmatically Make a Wave using Javascript
本文介绍了使用Javascript以编程方式掀起波澜的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是我目前拥有的 http://jsfiddle.net/6GEfr/
这有效,但我希望它像波浪一样.它应该看起来像实际的波浪,而不是"v"形.您如何逐步做到这一点?
This works but I want it to be like a wave. Rather than a 'v' shape, it should look like an actual wave. How do you gradually do this?
var height = 0;
setInterval(function () {
$('#container').prepend('<div style="height:' + Math.abs(height++) + '%"></div>');
height = (height == 100) ? -100 : height;
}, 10);
我的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;
}
推荐答案
Just use Math.sin()
to model the wave.
var i = 5, height = 0;
setInterval(function () {
$('#container').prepend('<div style="height:' + height + '%"></div>');
i += 0.05;
height = 50 * Math.sin(i) + 50;
}, 10);
如果要使波形更平滑,请减小增量值和元素的宽度.这是一个示例.
If you want to make the wave smoother, decrease the increment value and the width of the elements. Here is an example.
这篇关于使用Javascript以编程方式掀起波澜的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文