javascript顯示圖片信息

我想在用戶訪問頁面時在主頁上顯示節日快樂圖片以及消息，並在幾秒鐘後消失。我想我必須在JavaScript或jQuery中完成，但我不知道該怎麼做。是否有任何示例/教程來做到這一點。javascript顯示圖片信息

我知道有一些jQuery插件像lightbox，陰影框等，但我不知道如何激活它們，當頁面加載時，所以我認爲它與JavaScript有關。

2011-12-20 uday

對於圖像像

<img src="x.png" alt="My Image" id="MyImage" />

jQuery庫下面的JavaScript將淡出出來5秒

後

setTimeout(function() 
{ 
    $("#MyImage").fadeOut('fast'); 
}, 5000);

見http://www.w3schools.com/jsref/met_win_settimeout.asp和http://api.jquery.com/fadeOut/

來源

2011-12-20 19:39:38

的感謝！你可以把它全部作爲一個塊，以便我可以複製和測試它。 – uday 2011-12-20 19:46:50

我們是否需要安裝一些jquery插件或者只是上面的代碼會這樣做？ - 謝謝戴夫 – uday 2011-12-21 18:37:12

上面的代碼是香草jQuery – 2011-12-21 19:11:16

-1

使用jquery。請參閱文檔和展示案例：http://jqueryui.com/demos/animate/。你會在這個頁面上發現大量的來源，讓你開始。

來源

2011-12-20 19:37:51 Yahel

$(document).ready(function(){ 
    setTimeout("$('#xmasdiv').fadeTo(300,0.0);",5000); 
    // change the 5000 to however many miliseconds you want delay, 
    // and the 300 to whatever speed of transition you wish to. 
    // And of course #xmasdiv should refer to the right DIV 
    // (like <div id="xmasdiv">[xmas content]</div>) 
});

hoep這會有所幫助。

來源

2011-12-20 19:40:28 jeffkee

另外：http://api.jquery.com/fadeTo/這是fadeTo（）函數文檔。你也可以使用fadeOut（300）;作爲速記，但我習慣於使用fadeTo來進行更簡潔的控制。 – jeffkee 2011-12-20 19:43:58

嗨，當我嘗試上面的腳本，什麼也沒有發生，當我用螢火蟲來看看我去哪裏錯了它說 - 「失蹤）後參數列表」$（document）.ready（function（）{' – uday 2011-12-22 18:11:40

你確保包括最後一行？}）;至關重要。目前我沒有看到任何丟失的括號.. – jeffkee 2011-12-22 21:35:54

，因爲你在問題中使用HTML5和CSS標籤，你可以實現一個簡單的CSS3動畫這樣的效果（略去了其他前綴）

#myimage { 
    -webkit-animation-name: fadein; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-timing-function: ease; 
    -webkit-animation-delay: 5s; 
    -webkit-animation-iteration-count: 1; 
} 


@-webkit-keyframes fadein { 
    0% { opacity: 1; } 
    100% { opacity: 0; } 
}

否則，你可以使用一個過渡

#myimage { 
    opacity: 1; 
    -webkit-transition-property: opacity; 
    -webkit-transition-duration: 1s; 
    -webkit-transition-timing-function: ease; 
    -webkit-transition-delay: 5s; 
} 

#myimage.classAppliedOnDomReadyViaJavascript { 
    opacity: 0; 
}

在dom就緒事件中應用特定類別以便轉換可以在給定時間開始

來源

2011-12-20 19:47:36 fcalderan

不會在IE7上工作，不是嗎？ – jeffkee 2011-12-20 20:04:34

沒有IE <9不支持css轉換/動畫 – fcalderan 2011-12-20 20:21:50

我想知道IE9成爲IE用戶中至少90％的最低標準還有多長時間，所以我們可以證明轉換的合理性。直到那時我們纔有了jQuery。 – jeffkee 2011-12-20 22:40:20

JS：

setTimeout(function() { 
    var image = document.getElementById('hh'), 
     step = 0.01, 
     opacity = 1, 
     interval = setInterval(function() { 
      opacity = opacity - step; 
      if (opacity < 0) { 
       image.style.opacity = 0; 
       clearInterval(interval); 
       return false; 
      } 
      image.style.opacity = opacity; 
     }, 1); 
}, 5000);

HTML：

<img id="hh" src="http://goo.gl/qEH6i" alt="" />

來源

2011-12-20 20:30:41

javascript顯示圖片信息

回答

相關問題