我使用 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
提交
取消