js函数在窗口调整大小时重复
我使用 js 函数创建了随机星，该函数根据窗口高度和宽度操作 CSS。我的目标是在调整窗口的高度和宽度时始终将它们放在视口中。
问题是每次我调整窗口大小时，js 函数都会将 CSS 添加到以前的 CSS 中而不先删除它们，这会导致水平滚动和其他不吸引人的视觉问题。
有什么办法可以防止这种情况发生吗？也许禁用和重新启用该功能或其他完全适合视口中的星星的功能，并使它们随着宽度和高度的变化而动态变化，而不保留先前应用的 css 属性和值？
<style>
body, html {margin: 0;}
#header {display: grid;background-color: #2e2e2e;width: 100vw;height: 100vh;overflow: hidden;}
#header i {position: absolute;border-radius: 100%;background: grey; }
</style>
<body>
<div id="header"></div>
<script>
window.onresize = function() {
skyCity();
};
function skyCity() {
for( var i=0; i < 400; i++) {
var header = document.getElementById("header"),
cityLight = document.createElement("i"),
x = Math.floor(Math.random() * window.innerWidth * .98),
y = Math.floor(Math.random() * window.innerHeight),
size = Math.random() * 1.5;
animate = Math.random() * 50;
cityLight.style.left = x + 'px';
cityLight.style.top = y + 'px';
cityLight.style.width = size + 1.5 + 'px';
cityLight.style.height = size + 1.5 + 'px';
cityLight.style.opacity = Math.random();
cityLight.style.animationDuration = 10 + animate + 's';
header.appendChild(cityLight);
}
};
skyCity();
</script>
</body>
倚天杖3回答
-
慕婉清6462132
似乎问题在于它附加了更多i标签或stars在调整大小时，而不是真正的 CSS 问题。我建议#header在添加更多<i>s 之前清除包装器。你可以这样做：window.onresize = function() { skyCity(); }; function skyCity() { var header = document.getElementById("header") header.innerHTML='' for( var i=0; i < 400; i++) { var cityLight = document.createElement("i"), x = Math.floor(Math.random() * window.innerWidth * .98), y = Math.floor(Math.random() * window.innerHeight), size = Math.random() * 1.5; animate = Math.random() * 50; cityLight.style.left = x + 'px'; cityLight.style.top = y + 'px'; cityLight.style.width = size + 1.5 + 'px'; cityLight.style.height = size + 1.5 + 'px'; cityLight.style.opacity = Math.random(); cityLight.style.animationDuration = 10 + animate + 's'; header.appendChild(cityLight); } }; skyCity(); #header {display: grid;background-color: #2e2e2e;width: 100vw;height: 100vh;overflow: hidden;} #header i {position: absolute;border-radius: 100%;background: grey; } <div id="header"></div>您可以查看完整页面链接，以便尝试调整窗口大小 -
宝慕林4294392
简单地说，每次调整大小时，都会调用skyCity()400header.appendChild(cityLight);次。它只是被编程来添加新的灯......您可以，a）在循环之前<i>从#headerin 中删除每个，skyCity()和b），b更好，<i>在加载时初始化400，然后在调整大小时更新它们的属性。 -
拉丁的传说
我建议您将“星”保留为数组（cityLights在下面的代码中），并在每次浏览器大小更改时应用新样式。<style> body, html {margin: 0;} #header {display: grid;background-color: #2e2e2e;width: 100vw;height: 100vh;overflow: hidden;} #header i {position: absolute;border-radius: 100%;background: grey; }</style><body> <div id="header"></div><script> window.onresize = function() { skyCity(); }; var header = document.getElementById("header"); var cityLights = [] for( var i=0; i < 400; i++) { cityLights.push(document.createElement("i")); } function skyCity() { for( var i=0; i < 400; i++) { var cityLight = cityLights[i], x = Math.floor(Math.random() * window.innerWidth * .98), y = Math.floor(Math.random() * window.innerHeight), size = Math.random() * 1.5; animate = Math.random() * 50; cityLight.style.left = x + 'px'; cityLight.style.top = y + 'px'; cityLight.style.width = size + 1.5 + 'px'; cityLight.style.height = size + 1.5 + 'px'; cityLight.style.opacity = Math.random(); cityLight.style.animationDuration = 10 + animate + 's'; header.appendChild(cityLight); } }; skyCity();</script></body>
随时随地看视频慕课网APP
相关分类
Java