第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在窗口調整大小時計算圓圈的大小

在窗口調整大小時計算圓圈的大小

冉冉說 2022-01-13 15:07:15
在我可以在下面運行的演示中,我生成了具有隨機位置和大小的圓圈。當您調整窗口大小時,我將頁面設置為重新加載,但這不是我想要的。我想在調整窗口大小時重新計算圓圈的大小和位置,而不重新加載頁面。我嘗試了很多東西,但我根本無法讓它工作。任何幫助將不勝感激。// Draw circlesconst list = (length, callback) =>  Array.from(new Array(length), (hole, index) => callback(index))const random = (min, max) => Math.random() * (max - min) + minconst 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 resizewindow.addEventListener("resize", () => {  window.location.reload(true)})body { overflow: hidden }span {  background: black;  position: absolute;  border-radius: 50%;  opacity: .5}
查看完整描述

1 回答

?
吃雞游戲

TA貢獻1829條經驗 獲得超7個贊

代替 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

}


查看完整回答
反對 回復 2022-01-13
  • 1 回答
  • 0 關注
  • 167 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號