亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

背景淡入淡出過渡 javascript 和 css

背景淡入淡出過渡 javascript 和 css

瀟湘沐 2023-10-24 21:22:17
我是 javascript 新手。我用 JavaScript 編寫了一個簡單的代碼,每 5 秒隨機改變我的背景,但是,它看起來很可怕。加載圖片和過渡都很跳躍,看起來一點也不好看。當我用谷歌搜索這個問題時,所有代碼看起來都非常復雜,我也不允許使用外部鏈接來尋求幫助(這是一個學校項目)。我想要的是在我的代碼中實現淡入淡出過渡,我見過人們使用 CSS 做到這一點,但為此,你必須添加每張圖片等等,我希望它可以重用,讓我編寫一次然后如果我添加更多圖片,我就不必改變任何東西,希望你們理解并希望你們能幫忙!:)代碼:function random_pic() {  // image array  var images = ["url(1.jpg)", "url(2.jpg)", "url(3.jpg)", "url(4.jpg)"];  // execute code every 5 seconds  window.setInterval(function() {      // create a random number between 0 and 4      var num = Math.floor(Math.random() * 4);      // set the background to one of the images in the array      document.body.style.backgroundImage = images[num];    },    5000);}random_pic();
查看完整描述

1 回答

?
幕布斯7119047

TA貢獻1794條經驗 獲得超8個贊

我讀到您有兩個不同的問題需要解決。最大的問題是交叉淡入淡出問題。另一個問題是圖像的性能和加載。

由于這是一項學校作業,我認為分享使這項工作有效的確切代碼并不是一個好主意,但我會給您一些指導,您可以使用它們來獲得所需的結果。

  1. 對于交叉淡入淡出,您需要有 2 個使用淡入淡出動畫(CSS 不透明度)來創建效果的元素。

  2. 一旦淡出的元素完全淡出,將圖像源交換為新的圖像源,然后將其淡入,同時另一個元素淡出并重復該過程。

  3. 通過在用戶不可見時更改圖像的來源,您可能會獲得更好的外觀和感覺,因為圖像將在顯示給用戶之前加載。

  4. 為了獲得高性能,請確保您使用的圖像的文件大小盡可能小。作為參考,我會盡量將它們控制在 100kb 以下。

  5. 您還可以考慮預加載圖像,但這對于學校作業來說可能太過分了。

希望這可以幫助。祝你好運。


查看完整回答
反對 回復 2023-10-24
  • 1 回答
  • 0 關注
  • 105 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

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

公眾號

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