当我单击确切的链接时，应该会出现带有jquery和超时的图像

Question

我需要做什么，因为我是jquery的新手，如下所示：我想要：当用户单击确切的链接时。精确的图像应该出现在屏幕中间，具有淡入淡出效果或没有淡入淡出效果(以较容易的方式为准(，然后在 4 秒后消失。

在头部，我包括了这个：

<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

Answer 1

像这样的事情呢：

$('#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;
}

请注意，我使用的是带有背景图像的

标签，而不是 标签。使用 css 更容易居中。

您还可以使用colorbox插件轻松地以模态显示图像，并且此插件具有许多其他功能。4 sec后自动关闭颜色框所需的代码如下

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

工作演示