我正在尝试使用 css 和 javascript 创建一个带有动画波浪(是的,水波)的完整视口(viewport)大小标题。一切都很好,除了波浪的集体宽度不随窗口宽度调整大小之外,即使在 codepen 示例中,我从中得到的片段也不会调整大小。
它还存在溢出问题;每个浅蓝色条都是 10px(根据我在 js 中的理解),并且在页面重新加载时总是有 1 太多的条,创建一个水平滚动条。我尝试过 overflow hidden ,但似乎没有任何作用。我假设它必须通过 js 来控制,但我对 javascript 不太熟悉,还没有修复。
大家有什么想法吗?
这是代码笔链接:https://codepen.io/loktar00/pen/kfrKC
还有 JavaScript:
var ocean = document.getElementById("ocean"),
waveWidth = 10,
waveCount = Math.floor(window.innerWidth/waveWidth),
docFrag = document.createDocumentFragment();
for(var i = 0; i < waveCount; i++){
var wave = document.createElement("div");
wave.className += " wave";
docFrag.appendChild(wave);
wave.style.left = i * waveWidth + "px";
wave.style.webkitAnimationDelay = (i/100) + "s";}
ocean.appendChild(docFrag);
编辑:只是想澄清一下 codepen 片段不是我的,找不到作者
最佳答案
这能解决您的问题吗?
var myFunc = function() {
// make some waves.
var ocean = document.getElementById("ocean"),
waveWidth = 10,
waveCount = Math.floor(window.innerWidth/waveWidth),
docFrag = document.createDocumentFragment();
for(var i = 0; i < waveCount; i++){
var wave = document.createElement("div");
wave.className += " wave";
docFrag.appendChild(wave);
wave.style.left = i * waveWidth + "px";
wave.style.webkitAnimationDelay = (i/100) + "s";
}
ocean.appendChild(docFrag);
}
myFunc();
$(window).resize(myFunc);
要消除滚动条,请使用 overflow: hide;
作为 body
关于javascript - 动画 css/js 波浪不随窗口大小调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31848387/