在您可以在下面运行的演示中，我生成了具有随机位置和大小的圆。
当您调整窗口大小时，我将页面设置为重新加载，但这不是我想要的。我想在调整窗口大小时重新计算圆圈的大小和位置，而不重新加载page。
我尝试了很多事情，但是根本无法正常工作。任何帮助将不胜感激。
// Draw circles
const list = (length, callback) =>
Array.from(new Array(length), (hole, index) => callback(index))
const random = (min, max) => Math.random() * (max - min) + min
const viewportWidth = Math.max(
document.documentElement.clientWidth,
window.innerWidth || 0
)
const viewportHeight = Math.max(
document.documentElement.clientHeight,
window.innerHeight || 0
)
const elements = list(48, () => {
const circle = document.createElement("span")
const minSize = Math.round((viewportWidth + viewportHeight) / 48)
const maxSize = Math.round((viewportWidth + viewportHeight) / 24)
const size = random(minSize, maxSize)
Object.assign(circle.style, {
width: `${size}px`,
height: `${size}px`,
left: `${random(0, 100)}%`,
top: `${random(0, 100)}%`
})
return circle
})
document.body.append(...elements)
// Reload page on window resize
window.addEventListener("resize", () => {
window.location.reload(true)
})body { overflow: hidden }
span {
background: black;
position: absolute;
border-radius: 50%;
opacity: .5
}改为px，使用vh或vw ov vmax或vmin单位
一些解释在这里https://web-design-weekly.com/2014-11-18-viewport-units-vw-vh-vmin-vmax/
vw： 1/100视口宽度
vh： 1/100视口高度
vmin：最小边的1/100
vmax：最大边的1/100
// Draw circles
const list = (length, callback) =>
Array.from(new Array(length), (hole, index) => callback(index))
const random = (min, max) => Math.random() * (max - min) + min
const viewportWidth = Math.max(
document.documentElement.clientWidth,
window.innerWidth || 0
)
const viewportHeight = Math.max(
document.documentElement.clientHeight,
window.innerHeight || 0
)
const elements = list(48, () => {
const circle = document.createElement("span")
const minSize = Math.round((viewportWidth + viewportHeight) / 150) // tune this to your needs
const maxSize = Math.round((viewportWidth + viewportHeight) / 80)// tune this to your needs
const size = random(minSize, maxSize)
Object.assign(circle.style, {
width: `${size}vmin`,// vmin used instead px , but vh,vw aand vmax is also avalaible
height: `${size}vmin`,// vmin used instead px , but vh,vw aand vmax is also avalaible
left: `${random(0, 100)}%`,
top: `${random(0, 100)}%`
})
return circle
})
document.body.append(...elements)body { overflow: hidden }
span {
background: black;
position: absolute;
border-radius: 50%;
opacity: .5
}本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句