我使用 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
TA贡献1804条经验 获得超2个赞
似乎问题在于它附加了更多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
TA贡献2021条经验 获得超8个赞
简单地说，每次调整大小时，都会调用skyCity()400header.appendChild(cityLight);次。它只是被编程来添加新的灯......
您可以，a）在循环之前<i>从#headerin 中删除每个，skyCity()
和b），b更好，<i>在加载时初始化400，然后在调整大小时更新它们的属性。
拉丁的传说
TA贡献1789条经验 获得超8个赞
我建议您将“星”保留为数组（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>
添加回答
举报
0/150
提交
取消