當我點擊一個確切的鏈接圖像應該出現與jQuery和超時

我需要做什麼，因爲我是新來的jQuery是以下內容：我想要：當用戶點擊一個確切的鏈接。一個確切的圖像應該顯示在屏幕中間，帶有淡入淡出效果或沒有（更簡單），然後它會在4秒後消失。當我點擊一個確切的鏈接圖像應該出現與jQuery和超時

在腦子裏，我包括在此：

<script src="http://code.jquery.com/jquery-latest.js"></script>

在我包括這身體： <a href="#" id="myLink">click</a> <img src="achievement.png" id="myImage" style="display:none">

我理解了它，現在我該怎樣將它設置爲疊加在網站的內容？ CSS可能

來源

2012-05-21 Neg

後一些代碼，我們一定會幫助你 – 2012-05-21 11:07:58

什麼是這樣的：

$('#myLink').click(function(){ 
    $('#myImage').fadeIn().delay(4000).fadeOut(); 
});

這裏是一個很好的方式使用CSS居中屏幕上的圖像：

HTML：

<div id="myImage"></div>

CSS ：

#myImage{ 
    position:fixed; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    background: url(path/to/image.png) center center no-repeat; 
}

請注意，我正在使用<div>標記，而不是使用背景圖片標記<img>標記。用css居中更容易。

來源

2012-05-21 11:12:13 aaberg

其中#myLink去的鏈接，並在那裏#myImage那張圖片鏈接？ – Neg

是的，myLink是鏈接的ID，myImage是圖像的ID。哈希字符（＃）指定jQuery應該搜索一個id。 – aaberg

好吧，我想到了，因爲我舉了一個編輯問題的例子。我的最後一個問題是：爲了將css構建在窗口中間並覆蓋內容，我必須將該圖像放入div中，然後爲該div構造css？ – Neg

您還可以使用colorbox插件輕鬆地以模式顯示圖像，並且此插件具有許多其他功能。你需要4 sec後自動關閉顏色框的代碼如下

$('.colorbox').colorbox({ 
     onOpen: function(){ 
      window.setTimeout(function() { 
      $.colorbox.close(); 
      }, 4000); 
     } 
    });

Working Demo

來源

2012-05-21 11:33:17

感謝你的回覆，我實際上試圖做的就像一個成就外觀：例如：下載<==鏈接onclick顯示成就圖像然後淡出。 – Neg

當我點擊一個確切的鏈接圖像應該出現與jQuery和超時

回答

相關問題